代码：
<!-- 主体区域 --> <section id="todoapp"> <!-- 输入框 --> <header> <h1>小白记事簿</h1> <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" /> </header> <!-- 列表区域 --> <section class="main"> <ul> <li v-for="(item,index) in list"> <div> <span>{{index+1}}</span> <label>{{item}}</label> <button class="destory" @click="remove(index)">x</button> </div> </li> </ul> </section> <!-- 列表清空 --> <footer> <!-- <footer v-show="list.length != 0"> --> <span v-if="list.length != 0"> <strong>{{list.length}}</strong>items left </span> <button @click="clear" v-show="list.length != 0">清空</button> </footer> </section> var app = new Vue({ el:"#todoapp", data:{ list:["吃饭","睡觉","打豆豆"], inputValue:"好好学习，天天向上" }, methods:{ add:function(){ this.list.push(this.inputValue); this.inputValue=""; }, remove:function(index){ console.log("删除"+index); this.list.splice(index,1); }, clear:function(){ this.list=[]; } } })