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>
关于v-model指令实现数据双向绑定的理解
猜你喜欢
转载自www.cnblogs.com/Yuigahama-Yui/p/13388386.html
今日推荐
周排行