代码及注释：
<div id="box">
<div class="head"><h2>Todos</h2><p>罗列日常计划，做一个时间管理大师！</p><div class="input"><span>内容</span><input type="text" v-model="search" placeholder="请输入你要做的事"/><span id='add' @click="addTodo">确认</span> //绑定事件</div>
</div><ul class="list"><li v-if="!todoList.length"> //数组为空时暂无数据</li><li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index"> //数组不为空时，循环数组<!-- 前面的序号 --><span class="xh">{{index + 1}}</span> //索引值+1<!-- 列表内容 --><span>{{todo}}</span><!-- 删除按钮 --><span class="qc" @click="deleteTodo(index)"></span> //传递索引值，定位需要删除的元素</li><li v-if="todoList.length"><b>总数：{{todoList.length}}</b><b id='clear' @click="clear">清除</b></li>
</ul>
</div>
var top= new Vue({el:"#box",// 在此处补全代码，实现所需功能data: {todoList: [],search: ''},// 获取搜索内容methods: {// 添加addTodo() {this.todoList.push(this.search) //将搜索值插入数组},// 删除deleteTodo(index) { this.todoList.splice(index, 1) //获取索引值，定位删除元素，进行元素删除},// 清除clear() {this.todoList=[] //数组重置为空}}
})知识点：
1.数组分割
array.splice(startIndex, howmany)进行元素删除，该方法会改变原数组
)
