vue:基础todolist待办事项完整,数据双向绑定,和循环遍历,判断方法,回车触发事件
vue:基础todolist待办事项完整,数据双向绑定,和循环遍历,判断方法,回车触发事件
点单选框,选项状态改变。
在这个事件中,主要是对数据双向绑定,和循环遍历,判断方法的运用。
1.其中我们对键盘事件做了捕获,当在表单中输入数据“回车时”添加信息的操作。
<input type="text" v-model="todo" @keydown="doadd($event)"/>
doadd(e){
// this.list.push(this.todo)
console.log(e.keyCode)
if(e.keyCode==13){
this.list.push({
title:this.todo,
checked:false
})
}
this.todo=''
},
<template>
<div id="app">
<input type="text" v-model="todo" @keydown="doadd($event)"/>
<button @click="doadd()">增加</button>
<br>
<br>
<h2>进行中</h2>
<ul>
<li v-for="(aa,key) in list" v-if="!aa.checked">
<input type="checkbox" v-model="aa.checked"/>{{aa.title}}<button @click="dodel(key)">删除</button>
</li>
</ul>
<h2>已完成</h2>
<ul>
<li v-for="(aa,key) in list" v-if="aa.checked">
<input type="checkbox" v-model="aa.checked"/>{{aa.title}}<button @click="dodel(key)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
ok:true,
todo:'',
list:[
{
title:"123",
checked:true
},
{
title:"456",
checked:false
},
]
}
},
methods:{
doadd(e){
// this.list.push(this.todo)
console.log(e.keyCode)
if(e.keyCode==13){
this.list.push({
title:this.todo,
checked:false
})
}
this.todo=''
},
dodel(key){
// alert(key)
this.list.splice(key,1)
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>