方法一(推荐):
不带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
})
}
}