在vue实际开发中,我们避免不了会使用v-for和v-if来操作数据,但是v-for和v-if同时使用时,有一个先后运行的优先级,v-for比v-if的优先级更高,这就说明在v-for的每次循环运行中每一次都会调用v-if的判断,所以不推荐v-if和v-for在同一个标签内同时使用。
为了避免上述情况的发生,我们通常会采用如下的两种方法:
1>ul和li搭配使用,或者是渲染父级标签下的子标签,可以使用如下方法:
<ul v-if="state">
<li v-for="(item,id) in list" :key="id"></li>
</ul>
2>可以使用过滤器将v-if中的判断转移到vue的computed的计算属性中,方法如下:
<ul>
<li v-for="(item,id) in formList" :key="id"></li>
</ul>
//利用vue的计算属性,过滤掉不需要的数据,剩下需要的数据再利用v-for循环遍历取出渲染
computed: {
formList: function () {
return this.list.filter(function (item) {
return item.state
})
}
}