todolist

<template>

<div id="app">

<!--添加文件框，设置双向绑定，并添加键盘监听事件（回车键：13）-->

<input type="text" v-model="todo" @keydown="doAdd($event)"/>

<!--添加按钮，设置点击事件-->

<button @click="doadd()">+增加</button>

<br>

<hr>

<h2>进行中</h2>

<ul>

<!--将文本框的内容添加在列表里，逐条显示。并在每条数据前设置单选框，与变量checked进行双向绑定，每条数据后设置删除按钮-->

<!--按删除键数据删除，当单选框为false时数据不显示-->

<li v-for="(item,key) in list" v-if="!item.checked">

<input type="checkbox" v-model='item.checked'> {{item.title}}---<button @click="del(key)">删除</button>

</li>

</ul>

<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="del(key)">删除</button>

</li>

</ul>

</div>

</template>

<script>

 

export default {

data () { /*业务逻辑里面定义的数据 */

return {

todo:'',

list:[],

}

},methods:{

doadd(){

//获取文本款输入得值

//把文本框的值push到list里

this.list.push({

title:this.todo,

checked:false,

}

);

this.todo='';

},del(key){

//删除指定列

this.list.splice(key,1);

},

doAdd(e){

//键盘事件

if (e.keyCode==13){

this.list.push({

title:this.todo,

checked:false,

}

);

this.todo='';

}

}

}

}

</script>

<style land="scss">

 

 

</style>