Mac下用vue-cli+webpack+bootstrap实现一个todolist（二）

整个应用实现的功能如下

1 增加待办事项，在input输入框中输入待办事项，点击回车键，自动添加到 待办事项列表中

2 点击待办事项可以改变它的状态，已完成的事件会有一个中划线的样式

打开App.vue将template的代码改为

<template>
<div id="app" class="container">
<div class="col-sm-12 gap">
<input class="form-control" type="text" v-model="addNew" @keyup.enter="addNewItem">
</div>
<div class="col-sm-12">
<ul class="list-group">
<li class="list-group-item" v-for="item in items"  @click="toggleBtn(item)" :class="{text_decoration:item.isFinished}">
{{item.label}}
</li>
</ul>
</div>
</div>
</template>

v-model:      进行数据的双向绑定
@keyup.enter：是vue自带的回车键方法
v-for:        用于循环数组里的每一项，生车功能对应html
:class:       使用了对象的语法，在item.isFinihsed为true的时候添加text_decoration样式
@click:       点击当前待帮事项，改变其状态

<script>

export default {
name: 'app',
data: function() {
return {
addNew:'',
items:[{
label:'看书',
isFinished: true
},
{
label:'喝茶',
isFinished: false
},{
label:'打麻将',
isFinished: false
}]
}
},

methods: {
addNewItem () {
const obj = {
label: this.addNew,
isFinished: false
};
this.items.push(obj);
this.addNew = '';
},
toggleBtn (item) {
console.log(item.isFinished);
item.isFinished = !item.isFinished;
}
}
}
</script>

<style>
.gap{
margin-bottom:10px;
}
.text_decoration {
text-decoration: line-through;
}
</style>