其他分享
首页 > 其他分享> > 关于v-model指令实现数据双向绑定的理解

关于v-model指令实现数据双向绑定的理解

作者:互联网

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>VUE最简单双向数据绑定实例</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 双向绑定
11 v-model指令:<input type="text" v-model="msg">
12 
13 单向数据绑定:
14 通过vue对象==>视图的显示
15 
16 
17 双向数据绑定:
18 通过vue对象<==>视图的显示
19 
20 
21 input和div能同步变化的原因
22 1、input里面内容改变的时候,vue对象里面的data的msg2也同步发生了变化
23 2、vue对象里面的data的msg2发生变化的时候,<div>{{msg2}}</div> 也同步发生变化
24 
25 用原生的js或者jquery如何来实现双向数据绑定
26 1、监听到input的变化
27 2、input发生变化的时候,我们去同步改变msg2的内容
28 3、msg2改变的时候,去更新视图里面的<div>{{msg2}}</div>的内容
29 
30 
31 -->
32 <div id="app">
33     <input type="text" v-model="msg2">
34     <div>{{msg2}}</div>
35 </div>
36 <script src="../js/vue.js"></script>
37 <script>
38     new Vue({
39         el:'#app',
40         data:{
41             msg:'我永远喜欢由比滨结衣',
42             msg2:'我永远喜欢YuigahamaYui'
43         }
44     });
45 </script>
46 </body>
47 </html>

 

标签:vue,msg2,绑定,视图,双向,input,model,data
来源: https://www.cnblogs.com/Yuigahama-Yui/p/13388386.html