关于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