Vue.js 如何使用条件句而不将其附加到元素?
在vue中,我们有需要附加到元素的指令v-if 有没有一种方法可以在不附加条件句的情况下像mustachejs那样使用条件句 我在一个单词数组中循环,它在每个单词中添加div,这很烦人 这是我的模板Vue.js 如何使用条件句而不将其附加到元素?,vue.js,Vue.js,在vue中,我们有需要附加到元素的指令v-if 有没有一种方法可以在不附加条件句的情况下像mustachejs那样使用条件句 我在一个单词数组中循环,它在每个单词中添加div,这很烦人 这是我的模板 <div v-for="(str, index) in reference" :key="index"> <div v-if="patternIncluded(str)"> <input type="text" v-model="remarks[index]
<div v-for="(str, index) in reference" :key="index">
<div v-if="patternIncluded(str)">
<input type="text" v-model="remarks[index]">
</div>
<div v-else>
{{str}}
</div>
</div>
您可以这样使用“模板”:
<template v-if=patternIncluded(str)>
//code
</template
<template v-else>
//code
</template>
//代码
这是您的代码,但使用的是标记
<template v-if="patternIncluded(str)">
<input type="text" v-model="remarks[index]">
</template>
<template v-else>
{{str}}
</template>
{{str}}
以下是Vue官方文档中的一个示例:
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
用户名
电子邮件
更多信息:
您还可以在文件底部的中使用和使用普通Javascript
希望这有帮助,干杯您可能会在表达式中使用三元,但我们可能需要看一些代码来帮助您you@GeorgeJempty我已经更新了我的问题,我不确定这是否是您想要实现的,这就是我将此作为评论发布的原因:(示例包含两种可能的解决方案)将其包装在模板中也会创建div@Raaz您应该用模板替换div和v-if:我已经更新了我的答案
<template v-if="patternIncluded(str)">
<input type="text" v-model="remarks[index]">
</template>
<template v-else>
{{str}}
</template>
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>