<template> <div id="app"> <h1>{{ msg }}</h1> <input type="text" v-model="todo" @keyup="addData($event)"/> <hr> <br> <h2>未完成</h2> <ul> <li v-for="(item,key) in list" v-if="!item.status"> <input type="checkbox" v-model="item.status"> {{item.title}}--------<button @click="delteData(key)">删除数据</button> </li> </ul> <br> <h2>已完成</h2> <ul> <li v-for="(item,key) in list" v-if="item.status"> <input type="checkbox" v-model="item.status"> {{item.title}}--------<button @click="delteData(key)">数据</button> </li> </ul> <div v-if="!status"> 这不是ok</div> <div v-if="status"> 这是ok</div> </div> </template> <script> /* 双向数据绑定,用于表单, */ export default { name: 'app', data () { return { status:true, msg: 'hello', todo: '', list:[] } },methods:{ addData(e){ console.log(e.keyCode) if (e.keyCode==13){ this.list.push( {'title':this.todo, 'status':false }, ) this.todo=''; }; },delteData(key){ alert(key) this.list.splice(key,1) } } } </script> <style> h1, h2 { font-weight: normal; } .box{ 100px; height: 100px; background-color: #42b983 } </style>