1.新增功能
分析：
生成列表结构：v-for="(index,item) in list " 数组
获取用户输入：v-mode="inputValue" 双向绑定
回车，新增数据 @keyup.enter="add" 添加数据 add:function(){ this.list.push (this.inputValue) }
2.删除功能
分析：
X按钮的显示和隐藏 ：li:hover .destroy {display:block}
点击删除指定内容：@click="remove(index)" remove:function(){this.list.splice(index,1)}
3.统计功能
分析：
统计列表个数：v-text length
4.清空所有信息 v-on 直接给list列表赋值为[ ]即可
5.隐藏底部
分析：
v-show/v-if 控制元素显示/隐藏
<body> <!-- 主体部分 --> <section id="todoapp"> <!-- 输入框 --> <header class="header"> <h1>记事本</h1> <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo"> </header> <!-- 列表区域 --> <section class="main"> <ul class="todo-list"> <li class="todo" v-for="(item,index) in list"> <div class="view"> <span class="index">{{ index+1 }}.</span> <label>{{item}}</label> <button class="destroy" @click="remove(index)"> X </button> </div> </li> </ul> </section> <!-- 统计和清空 --> <footer class="footer"> <span class="todo-count" v-if="list.length !=0 "> <strong>{{ list.length }}</strong> items left </span> <button class="clear-completed" @click="clear" v-show="list.length != 0">clear</button> </footer> </section> <script> var app = new Vue({ el:"#todoapp", data:{ list:["敲代码","吃饭","睡觉","学习金融知识"], inputValue:"发发呆", }, methods: { add:function(){ this.list.push(this.inputValue); }, remove:function(index){ console.log("shanchu"+ index); this.list.splice(index,1); }, clear:function(){ this.list = []; } }, }) </script> </body> </html>
原文：https://www.cnblogs.com/zhoujingye/p/14788109.html