4.1.3　v-model

v-model指令用来在表单<input>、<textarea>及<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以及更新数据，并对一些极端场景进行特殊处理。

【例4.3】v-model指令（源代码\ch04\4.3.html）。

    <div id="app">
      <!--使用v-model指令双向绑定input的值和test属性的值-->
      <p><input v-model="content" type="text"></p>
      <!--显示content的值-->
        <p>{{content}}</p>
    </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //创建一个应用程序实例
        const vm= Vue.createApp({
             data(){
                 return {
                    content: "空调"
               }
            }
         }).mount('#app');
    </script>

在谷歌浏览器中运行程序，在输入框中输入“采购金额为8866万元”，将在输入框下面的位置显示“采购金额为8866万元”，如图4-4所示。

此时，在谷歌浏览器的控制台中输入：

    vm.content

按Enter键，可以看到content属性的值也变成了“采购金额为8866万元”，如图4-5所示。

还可以在实例中修改content属性的值。例如在谷歌浏览器的控制台中输入下面代码：

    vm.content="采购金额为1699万元";

然后按Enter键，可发现页面中的内容也发生变化，如图4-6所示。

从上面这个示例可以了解Vue的双向数据绑定，关于v-model指令的更多使用方法，后面的章节还会详细讲述。 Z4n041MnZ6xYlxf88IRIwzgiJ1XB/5lspbEhFl+Z4hB7zU3M8tcnwdOqYOLCDdxy