v-for和v-if不能同时使用
Posted chicidol
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了v-for和v-if不能同时使用相关的知识，希望对你有一定的参考价值。
如果使用v-for遍历数据时，想筛选出URL不为空的项并进行渲染
<ul>
<li v-for="(item,index) in list" v-if="item.url" :key="index">
{{ item.name }}
</li>
</ul>
但是v-for和v-if无法同时使用，这时就可以在computed中进行筛选操作
<ul>
<li v-for="(item,index) in musicList" :key="index">
{{ item.name }}
</li>
</ul>
data () {
return {
list: []
};
},
computed: {
musicList: function () {
return this.list.filter(function (item) {
return item.url;//返回item.url不为空的项，添加到musicList数组
})
}
},
以上是关于v-for和v-if不能同时使用的主要内容，如果未能解决你的问题，请参考以下文章