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>