VUE课程---13、双向数据绑定v-model

一、总结

一句话总结：

vue中，v-model指令可以做双向绑定，也就是M（model）和V（view）的双向绑定



<div id="app">
    <input type="text" v-model="msg2">
<!--    <input type="text" v-bind:value="msg2">-->
    <div>{{msg2}}</div>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg2:'这是vue的双向数据绑定的实例'
        }
    });
</script>


 

 

1、双向数据绑定指令v-model 注意？

1、vue中能做双向绑定的指令只有一个v-model
2、双向绑定指令v-model只能运用到表单元素上，例如input、textarea、select等

 

 

 

 

二、双向数据绑定v-model

博客对应课程的视频位置：13、双向数据绑定v-model

 ​​

 



1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>双向数据绑定v-model</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 双向绑定注意
11 1、vue中能做双向绑定的指令只有一个v-model
12 2、双向绑定指令v-model只能运用到表单元素上，例如input、textarea、select等
13 
14 -->
15 <div id="app">
16     <input type="text" v-model="msg2">
17 <!--    <input type="text" v-bind:value="msg2">-->
18     <div>{{msg2}}</div>
19 </div>
20 <script src="../js/vue.js"></script>
21 <script>
22     new Vue({
23         el:'#app',
24         data:{
25             msg2:'这是vue的双向数据绑定的实例'
26         }
27     });
28 </script>
29 
30 </body>
31 </html>


 

VUE课程---13、双向数据绑定v-model_微信