1,首先完成一个添加删除的功能,已有。 添加删除数据
2,模拟数据,在list数组中模拟数据,也可以为空。
list:[
{title:'进行中',checked:true},
{title:'已完成',checked:false}
]
3,在 data
中添加状态 checked:true
,通过更改状态来完成需求,
3,在数据前面添加多选按钮,再使用 v-model
进行双向数据绑定 <input type="checkbox" name="" id="" v-model="item.checked">
,
注意:一定要是 v-model="item.checked"
,不是v-model="checked"
4,使用 v-if=""
进行判断,判断 item.checked
是否为 true
,
<h2>进行中</h2>
<li v-for="(item, key) in list" :key="key" v-if="item.checked">&l