表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

案例的解析：

<div id="app">
  <input type="text" v-model="message">
    {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            message:'你好呀',
        }
    })
</script>

当我们在输入框输入内容时

因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。

当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。

所以，通过v-model实现了双向的绑定。

当然，我们也可以将v-model用于textarea元素：

<!- 用法二：绑定 textarea 元素-->
 <textarea v-model="message"></textarea>
  <p>输入的内容是：{{message}}</p>