Vue.js前端开发基础及项目化应用（微课版）最新章节_古凌岚著

2.3 双向绑定

双向绑定是指数据改变会引起视图变化，视图变化也会带动数据的改变。它主要针对HTML表单元素的属性进行绑定，如input、select。双向绑定的语法为v-model="JavaScript表达式"。其中v-model为DOM元素的新属性，JavaScript表达式通常引用响应式数据。

下面先通过一个例子来了解使用v-model绑定HTML输入框元素的具体方法。

【例2-7】 使用v-model绑定HTML输入框（input和textarea）元素的示例。

（1）创建2-7.html文件，程序代码如下：

　<body>
　　<!--挂载点-->
　　<div id="app">
　　　　　<input v-model="inputMessage" placeholder="请输入一行文字">
　　　　　<p>{{inputMessage}}</p>
　　　<textarea v-model="textMessage" placeholder="请输入多行文字"></textarea>
　　　<p>{{textMessage}}</p>
　　</div>
　</body>
　<script type="text/j avascript">
　　　const RootComponent = { //创建根组件
　　　　data () {
　　　　　return {
　　　　　　inputMessage: '你好，这是输入框',
　　　　　　textMessage:'你好，这是多行输入框'
　　　　}
　　　}
　　}
　　const vueApp = Vue.createApp(RootComponent) //创建Vue应用实例
　　const vm = vueApp.mount("#app") //挂载处理
　　console.log(vm.$data.inputMessage) //输出inputMessage属性值</script>

（2）运行程序，浏览器页面上显示的输出效果如图2-6（a）所示，页面有两个输入框和两行文字，第一个输入框是input元素，第二个则是textarea元素；两行文字分别是两个插值表达式的执行结果。当你在input元素中修改内容为“你好，这是输入框新内容”时，第一行文字也会随之改变，如图2-6（b）所示。

图2-6　例2-7运行结果

（3）代码分析：通过增加v-model属性，并在表达式中引用data选项定义的数据inputMessage和textMessage，可以分别实现对input和textarea元素的双向绑定；当你修改输入框元素中的内容时，输入框下面的文字会随之变化，而这两行文字正是inputMessage和textMessage的最新值；为了实时跟踪数据和视图的变化，我们在JavaScript代码中，通过console.log(vm.$data.inputMessage)输出初始状态下inputMessage的值，其中vm.$data为组件实例内置属性，打开浏览器开发者工具的控制台即可看到输出内容，当input元素中的内容被改为“你好，这是输入框新内容”时，在控制台中输入vm.$data.inputMessage，可以看到inputMessage的值也同时发生了变化，如图2-7所示。读者可使用Vue Devtools工具实时查看inputMessage被修改时input元素中内容的更新。

图2-7　在浏览器开发者工具的控制台查看输出的inputMessage的最新值

下面再通过使用v-model绑定HTML单选框和下拉列表框元素的例子，来进一步了解双向绑定的应用方法。

【例2-8】 使用v-model绑定HTML单选框（radio）元素示例。

（1）创建2-8.html文件，程序代码如下：

　<body>
　　<!--挂载点-->
　　<div id="app">
　　　　证书：
　　　　<input type="radio" name="certificate" value="高" v-model="level"> 高级
　　　　<input type="radio" name="certificate" value="中" v-model="level"> 中级
　　　　<input type="radio" name="certificate" value="初" v-model="level"> 初级
　　　　<p>证书级别是：{{level}}</p>
　　</div>
　　</body>
　　<script type="text/j avascript">
　　　　const RootComponent = { //创建根组件
　　　　　data () {
　　　　　　return {
　　　　　　　level: '高级',
　　　　　　}
　　　　}
　　}
　　const vueApp = Vue.createApp(RootComponent) //创建Vue应用实例
　　vueApp.mount("#app") //挂载处理
　　</script>

（2）运行程序，浏览器页面上显示的执行效果如图2-8所示。页面初始状态下，证书级别显示的是“高”，当单击“高级”“中级”或“初级”选项时，选项下面一行内容将更新为对应级别的选项值。

图2-8　例2-8执行效果

（3）代码分析：radio元素是HTML input元素的一种类型，v-model绑定方式与输入框类似；这里v-model属性的表达式中引用了data选项定义的数据level，level会影响radio元素的选中值，反之，当radio元素的选中值发生变化时，数据level也随之更新。

【例2-9】 使用v-model绑定HTML下拉列表框（select）元素示例。

（1）创建2-9.html文件，程序代码如下：

<body>
　　<!--挂载点-->
　　<div id="app">
　　　　　证书：
　　　　　<select v-model="level">
　　　　　<option value="" disabled>--请选择--</option>
　　　　　<option value="高">高级</option>
　　　　　<option value="中">中级</option>
　　　　　<option value="初">初级</option>
　　</select>
　　<p>你的选择：{{level}}</p>
　</div>
</body>
<script type="text/j avascript">
　　const RootComponent = { //创建根组件
　　　　data () {
　　　　　return{
　　　　　　level: '高级',
　　　　　}
　　　　}
　　　}
　　const vueApp = Vue.createApp(RootComponent) //创建Vue应用实例
　　vueApp.mount("#app") //挂载处理
</script>

（2）运行程序，浏览器页面上显示的执行效果如图2-9所示。页面初始状态下，证书级别显示的是“高”，当选择下拉列表框中“高级”“中级”或“初级”时，下拉列表框下面一行内容将更新为对应级别的选项值。

图2-9　例2-9执行效果

（3）代码分析：针对HTML select元素的双向绑定，同样需要增加v-model指令为新属性，该属性表达式引用了data选项定义的数据level，level与HTML select元素选中项的value属性值互相影响。

通过上述3个例子可以归纳出，无论是输入框、单选框还是下拉列表框，v-model绑定的都是这些DOM元素的value属性，而且value属性的初始值以JavaScript代码中data选项定义的数据作为数据来源，因此，我们需要在data选项中声明其初始值。