Vue2零基础写一个todolist（三）第三篇，双向绑定的介绍和试用，v-for的实际应用，vue的js部分的写法。。

接下来来写js部分。

首先是双向绑定，先在input里写一个v-model="mission"，把placeholder="回车即可添加任务"改为:placeholder="placeholder"，添加对回车键的监听方法addList，@keyup.enter="addList"

 <input class="input" type="text" name="" id="" :placeholder="placeholder" v-model="mission" @keyup.enter="addList">

v-model本质上是一个语法糖。<input v-model="mission">本质上是<input :value="mission" @input="mission = $event.target.value">，其中@input是对<input>输入事件的一个监听:value="mission"是将监听事件中的数据放入到input。

v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。

:placeholder="placeholder"是v-bind:placeholder的简写，也是双向绑定获取数据的方式。

接着在script里写把mission和placeholder都定义出来，然后在数据里继续添加一个数组missionList，用于装下即将要输入的数据。然后写开始写按下回车键后的方法methods。

<script>
  export default {
    data() {
      return {
         mission: '',
         placeholder: '回车即可添加任务',
         missionList:[]
      }
    },
    methods:{
      addList() {
        /* 
          用一个对象接收按下回车键传递过来的mission，
          并设置默认点击状态为false，
          然后用unshift插入missionList数组顺序的的第一位，
          最后将mission置空
        */
        const obj = {
          title: this.mission,
          check: false
        }
        this.missionList.unshift(obj)
        this.mission = ""
      },
    }
  }
</script>

然后我们修改任务列表部分，将class="list-item"的div只留下一个其他都删掉，改写这个div为

<div class="list-item"  v-for="(item,index) in missionList" :key="index" >
   <span class="list-check-box">
      <span class="list-check-show">√</span>
   </span>
   <span>
      {{item.title}}
   </span>
</div>

v-for是作用是将missionList里的每一个对象都渲染到页面中来，item是missionList里的对象，index是每个对象的索引，索引的数从0开始计数。我们展示的内容只需要每个对象的title部分，所以取item.title

接着在input里输入内容按下回车，任务列表里就有内容了。

这时候修改这一部分的代码，将3改为实时计算missionList的对象数量，{{missionList.length}}，就能实时展示了。

 <div class="left">
   {{missionList.length}}个任务未完成
 </div>