双向绑定是指数据改变会引起视图变化,视图变化也会带动数据的改变。它主要针对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选项中声明其初始值。