1.记事本案例
需要实现的功能：
- 新增：输入任务按回车，就会添加任务到列表。
- 删除：点击每个任务后的❌，该任务就会被清除。
- 统计：统计剩余几个任务。
- 清空：点击右下角清除按钮，所有任务都会被清除。
- 隐藏：当没有任务时，最后一栏里的内容隐藏。效果如下：
2.实现原理
2.1新增功能
inputValue="" v-model="inputValue" @keyup.enter="add" add:function(){ this.list.push(this.inputValue) } 复制代码
2.2删除功能
// 要传递参数 @click="remove(index)" remove:function(index){ this.list.splice(index,1) } 复制代码
2.3统计功能
{{list.length}} 复制代码
2.4清空功能
@click="clear" clear:function(){ list=[] } 复制代码
2.5隐藏功能
v-show="list.length!=0" 复制代码
// 源码 <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <main id="todoapp"> <h1>小小记事本</h1> <input v-model="inputValue" @keyup.enter="add" type="text" placeholder="请输入任务"> <!-- 列表区域 --> <section class="task"> <ul> <li v-for="(item,index) in list"> <span>{{index+1}}</span> <label>{{item}}</label> <i @click="remove(index)">X</i> </li> </ul> </section> <!-- 统计和清空 --> <footer class="footer"> <span v-show="list.length!=0"><em>{{list.length}}</em> 个任务剩余 </span> <i v-show="list.length!=0" @click="clear">清除</i> </footer> </main> <script> var app = new Vue({ el: "#todoapp", data: { list: ["吃饭饭", "睡觉觉", "写代码"], inputValue: "" }, methods: { add: function () { this.list.push(this.inputValue) }, remove: function (index) { this.list.splice(index, 1) }, clear: function () { this.list = [] } } }) </script>
作者：Cvgod
链接：https://juejin.cn/post/6953133110997303309
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
