app.vue
<template> <div id="app"> <input type="text" v-model='todo' @keydown="doAdd($event)" /> <br> <hr> <br> <h2>进行中</h2> <ul> <li v-for="(item,key) in list" v-if="!item.checked"> <input type="checkbox" v-model='item.checked'> {{item.title}} ---- <button @click="removeData(key)">删除</button> </li> </ul> <br> <h2>已完成</h2> <ul class="finish"> <li v-for="(item,key) in list" v-if="item.checked"> <input type="checkbox" v-model='item.checked'> {{item.title}} ----<button @click="removeData(key)">删除</button> </li> </ul> <h2 v-if='ok'>这是一个ok</h2> <h2 v-if='!ok'>这是一个No</h2> <button @click="getList()">获取list的值</button> </div> </template> <script> /* ['录制nodejs','录制ionic'] [ { title:'录制nodejs', checked:true }, { title: '录制ionic', checked: false } ] */ export default { data () { return { ok:false, todo:'' , list: [ { title: '录制nodejs', checked: true }, { title: '录制ionic', checked: false } ] } }, methods:{ doAdd(e){ console.log(e.keyCode) if(e.keyCode==13){ //1、获取文本框输入的值 2、把文本框的值push到list里面 this.list.push({ title: this.todo, checked: false }) this.todo=''; } }, removeData(key){ // alert(key) //splice js操作数组的方法 this.list.splice(key,1); }, getList(){ console.log(this.list) } } } </script> <style lang="scss"> .finish{ li{ background:#eee; } } </style>