值得注意的是,在vue2.0中同时使用v-for和v-if的话,v-for会更优先,而在vue3.0中是v-if更加优先。
方法一(推荐):
不带if
<ul>
<li
v-for="(item, index) in list"
:key="index"
>
{{ item.title }}
</li>
</ul>
带if
<ul v-for="(item, index) in list" :key="index">
<li v-if="item.checked">{{item.title}}</li>
</ul>
data () { // 业务逻辑里面定义的数据
return {
todo: '',
list: [{
title: '111111',
checked: true
}, {
title: '22222',
checked: false
}]
}
}
方法二(通过计算属性):过滤掉不需要的数据,剩下需要的数据再利用v-for循环遍历取出渲染
<h2>进行中</h2>
<ul>
<li v-for="(item, index) in todoList" :key="index">
<input type="checkbox">{{item.title}} ----- <button @click="removeData(index)">删除/button>
</li>
</ul>
<br>
<h2>已完成</h2>
<ul>
<li v-for="(item, index) in doneList" :key="index" >
<input type="checkbox">{{item.title}} ----- <button @click="removeData(index)">删除/button>
</li>
</ul>
data () { // 业务逻辑里面定义的数据
return {
todo: '',
list: [{
title: '111111',
checked: true
}, {
title: '22222',
checked: false
}]
}
}
computed: {
todoList: function() {
return this.list.filter(function (item) {
return item.checked
})
},
doneList: function() {
return this.list.filter(function(item) {
return !item.checked
})
}
}