v-model——雙向資料繫結
阿新 • • 發佈:2018-12-11
注意:
1.v-model雙向繫結,v-bind只能單項繫結
2.v-model只能用在表單元素中
HTML程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/vue.js"></script> </head> <body> <div id="app"> <h3>{{ msg }}</h3> <input type="text" v-bind:value="msg" style="width:100%"> <!--如果忘記寫v-bind則是直接將input賦值為msg,而並沒有繫結事件--> <input type="text" v-model="msg" style="width:100%"> </div> <script> var vm = new Vue({ el:'#app', data:{ msg:'陳小帥是真的帥' }, methods:{} }); </script> </body> </html>
效果: