如何在Vue的插值语法中{{ }} 判断多个条件
如何使用vue中插值语法判断多个条件?
·
问题:{{ }} 插值语法一般用于展示遍历的值,如果有两个条件可以使用三元表达式,如果有多个条件该如何使用?
解决:使用计算属性解决多个条件的判断
1.计算属性中判断:ps(记得把遍历的新数组 return 给tagName)
computed: {
tagName() {
return this.dynamicTags.map((item) => {
if (item.cateName === "classCount") {
return `年级人数:${item.name}人`;
} else if (item.cateName === "startTime") {
return `开学时间:${item.name}年`;
} else {
return item.name;
}
});
},
},
2.tagName返回的是一个数组,通过v-for的 index 进行动态添加
//动态标签
<el-tag
:key="tag.id"
v-for="(tag,index) in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag.name, tag.cateName)"
>
{{tagName[index]}}
</el-tag>
更多推荐
已为社区贡献1条内容
所有评论(0)