本文主要是介绍个人练习----Vue案例--toDoList（ 必须会，用到的地方很多 ）【如有不对，欢迎指正】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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"></li><h2>已完成</h2>
<li v-for="(item, key) in list" :key="key" v-if="!item.checked"></li>
注意：一定要是 v-if="item.checked" ，不是 v-if="checked"
5，使用 push() 一个对象，让他的 checked 默认为 false，
this.list.push({title:this.title,checked:false
});
以下是代码
<template><div id="app"><!-- vue 的模板里面，所有的内容要被一个根节点包含起来 --><!-- <img src="./assets/logo.png"> --><div><input type="text" name="" id="" v-model="todo" @keydown.13="add()"><button @click="add()">增加</button><hr><h2>进行中</h2><ul><li v-for="(item, key) in list" :key="key" v-if="!item.checked"><input type="checkbox" name="" id="" v-model="item.checked">{{ item.title }}--{{key}}<button @click="removeData(key)">删除</button></li></ul><h2>已完成</h2><ul><li v-for="(item, key) in list" :key="key" v-if="item.checked"><input type="checkbox" name="" id="" v-model="item.checked">{{ item.title }}--{{key}}<button @click="removeData(key)">删除</button></li></ul></div></div>
</template><script>
export default {data() {return {todo:'',list:[{title:'进行中',checked:true},{title:'已完成',checked:false}]}},methods: {add(){this.list.push({title:this.todo,checked:false});this.todo = ""},removeData(e){this.list.splice(e,1)}},
}
</script>
<style lang="scss"></style>这篇关于个人练习----Vue案例--toDoList（ 必须会，用到的地方很多 ）【如有不对，欢迎指正】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
