vue02-資料雙向繫結
阿新 • • 發佈：2018-12-11
首先看下面程式碼：
<!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8"/> <title>Hello world</title> <script src="vue.js"></script> </head> <body> <div id="app"> <!-- 雙向繫結 mvvm--> <input type="text" v-model="inputValue"/> <button v-on:click="handleBtnClick">提交</button> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script> var app = new Vue({ el:'#app', data:{ list:[], inputValue:'' }, methods:{ handleBtnClick: function(){ this.list.push(this.inputValue); this.inputValue=''; } } }) </script> </body> </html>
v-model: 在表單或者元件上建立雙向繫結，這裡繫結vue例項中的inputValue值。雙向繫結的意思是指：vue例項中的inputValue值變化，頁面上的值也會變化，頁面上的值變化，vue例項中變數的值也會變化，也就是mvvm。
v-on: 繫結事件，這裡繫結click事件，觸發handleBtnClick這個方法
v-for:是迴圈，把list裡面的值放到item中，然後再<li>標籤中顯示
頁面顯示效果如下，點選提交，元素會放到下面<ul>列表中
