vue.js--基础事件结合双向数据绑定实现todolist 待办事项已经完成和进行中，键盘事件...-CSDN博客

<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{
width: 100px;
height: 100px;
background-color: #42b983
}
</style>