微信扫一扫打赏支持

vue双向数据绑定最最最最最简单直观的例子

vue双向数据绑定最最最最最简单直观的例子

一、总结

一句话总结：双向绑定既不仅model可以影响view的数据，view也可以影响model的数据

view model 数据

 

1、vue双向数据绑定核心代码？

v-model
10     <div id="app">
11       <div>{{ message }}</div>
12       <input v-model="message">
13       <h1>{{ message }}</h1>
14     </div>

 

 

 

二、vue双向数据绑定最最最最最简单直观的例子

1、效果截图

 

2、代码

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>wue01</title>
 7     <script src="vue.min.js"></script>
 8   </head>
 9   <body>
10     <div id="app">
11       <div>{{ message }}</div>
12       <input v-model="message">
13       <h1>{{ message }}</h1>
14     </div>
15     
16     <!-- built files will be auto injected -->
17   </body>
18   <script>
19     new Vue({
20       el: '#app',
21       data: {
22         message: 'Hello Vue.js!'
23       }
24     })
25   </script>
26 </html>

 

 

 
posted @ 2018-11-22 17:20  范仁义  阅读(1252)  评论(0)    收藏  举报