上一篇 第二篇 v-for ( 列表渲染 ) 基础使用1.0 中讲述了这个 v-for 的列表循环内容，同时完成了一个小案例 ，那么在讲2.0前，先来讲一下v-model指令；

v-model

v-model 指令 主要实现数据的双向绑定 ，通常使用在表单元素上，下面用一个简单的例子演示，

这里需要用到 vue 的一个拓展工具 vue-devtools 来演示，这个如有需要接下来会给到大家。

<div id="app">
        {{mytext}}
</div>

<script type="text/javascript">
      new Vue({
          el:'#app',
           data:{
              mytext:'LHXZ'
          }
      })
</script>

打开控制并点开 vue-devtools 拓展工具查看 mytext 数据；并进行修改保存查看页面的变化；

了解了这个v-model指令之后进一步来拓展之前的待办录案例，v-model 指令实现双向数据绑定，并常用于表单元素，之前的待办录获取 input 框的数据是需要 @input = "changeData"做数据的监听从而来获取的，那么v-model指令能够实现数据的双向绑定，那么我们能不能通过v-model指令从而拿到input框中的数据？

拓展(待办录) 2.0

 1.将v-model指令绑定到input上，同时值为data 中定义的 myinput:' '（修改之前的代码）

<div id="app">
      <h1>待办录2.0</h1>
      <input type="text" placeholder="请输入待办事情" v-model="myinput"/>
      <button @click="add()">添加</button>

      <ul v-for="item in list">
        <li>{{item}}</li>
      </ul>
</div>

2.打开控制台会发现，使用 vue-devtooks拓展查看，当我们修改 input 框当中的数据时，data当中的myinput的值也会随之发生变化，这就是v-model指令实现数据的双向绑定；

 3.使用v-model指令来对之前的案例修改会发现，之前的 待办录案例1.0 中去获取input框中数据的时候总是要去做数据变化的一个监听 ；最后需要对输入框的每一次输入后清空操作，则不需要用户每次添加之后都需要去删掉之前输入的内容；（修改之前的代码）

    <div id="app">
      <h1>待办录2.0</h1>
      <input type="text" placeholder="请输入待办事情" v-model="myinput"/>
      <button @click="add()">添加</button>

      <ul v-for="item in list">
        <li>{{item}}</li>
      </ul>
    </div>

    <script>
      var vm = new Vue({
			el:'#app',
			data:{
				// 定义一个待办事件的空数组
				list:[],
        // input框数据
        myinput:''
      },
      methods:{
        add(){
          // 添加到数组
          this.list.push(this.myinput);
          // 重置input框
          this.myinput = '';
        }
      }
		})
    </script>

        这一篇结合上一篇v-for的使用，从数据框拿数据是从数据变化的监听获取到数据（@input="changeData"），使用push()方法到数组，v-for基于数组渲染列表的这么一个过程，那么这一篇内容，是从v-model指令当中，利用v-model数据的双向绑定的特点结合获取到input数据，结合v-for实现了我们这个待办录1.0 到 2.0 。