黑马vue---14、v-model双向绑定

Z时代
2024-01-10
分类：综合

vue

一、总结

一句话总结：

1、v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定

2、v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定

1、v-model的使用限制？

v-model 只能运用在表单元素中：input(radio, text, address, email....) select checkbox textarea

2、v-model使用实例？

input type="text" style="width:100%;" v-model="msg"

二、v-model双向绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="./lib/vue-2.4.0.js"></script>
10 </head>
11 
12 <body>
13   <div id="app">
14     <h4>{{ msg }}</h4>
15 
16     <!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定  -->
17     <!-- <input type="text" v-bind:value="msg" style="width:100%;"> -->
18 
19     <!-- 使用  v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->
20     <!-- 注意： v-model 只能运用在 表单元素中 -->
21     <!-- input(radio, text, address, email....)   select    checkbox   textarea   -->
22     <input type="text" style="width:100%;" v-model="msg">
23   </div>
24 
25   <script>
26     // 创建 Vue 实例，得到 ViewModel
27     var vm = new Vue({
28       el: '#app',
29       data: {
30         msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
31       },
32       methods: {
33       }
34     });
35   </script>
36 </body>
37 
38 </html>