簡述vue的雙向數據綁定步驟-tft每日頭條

vue使用v-model實現這些标簽數據的雙向綁定，它會根據控件類型自動選取正确的方法來更新元素。

v-model 之 input

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./asset/vue.js"></script> <title>Vuejs</title> </head> <body> <div id="app"> <div> <input type="text" v-model="msg" > </div> <div> <p>{{ msg }}</p> </div> </div> </body> <script> var app=new Vue({ el:'#app', data:{ msg:"hello" }, methods:{ } }) </script> </html>

簡述vue的雙向數據綁定步驟（Vue入門系列六v-model）1

Vue入門系列：六 v-model 雙向數據綁定 input

頁面輸出

簡述vue的雙向數據綁定步驟（Vue入門系列六v-model）2

Vue入門系列：六 v-model 雙向數據綁定

解析:

v-model 實現雙線數據綁定的意思是不論你是從數據層還是視圖層去改變這個值視圖和數據層的數據會同時發生改變.

當你在input框裡改變hello值的時候,它綁定的msg會自動發生變化.(視圖層-->數據層)
頁面初始化的時候設置msg=hello 而hello會自動顯示在input裡面.(數據層-->視圖層)

簡述vue的雙向數據綁定步驟（Vue入門系列六v-model）3

v-model 之 textarea

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./asset/vue.js"></script> <title>Vuejs</title> </head> <body> <div id="app"> <div>  <textarea v-model="msg" id="" cols="30" rows="10"></textarea> </div> <div> <p>{{ msg }}</p> </div> </div> </body> <script> var app=new Vue({ el:'#app', data:{ msg:"hello" }, methods:{ } }) </script> </html>

簡述vue的雙向數據綁定步驟（Vue入門系列六v-model）4

Vue入門系列：六 v-model 雙向數據綁定 textarea

簡述vue的雙向數據綁定步驟（Vue入門系列六v-model）5

Vue入門系列：六 v-model 雙向數據綁定

動态改變文本域裡面的數據下面也會一起發生變化

簡述vue的雙向數據綁定步驟（Vue入門系列六v-model）6

v-model 之 select

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./asset/vue.js"></script> <title>Vuejs</title> </head> <body> <div id="app"> <div>   <select v-model="msg" id=""> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </div> <div> <p>{{ msg }}</p> </div> </div> </body> <script> var app=new Vue({ el:'#app', data:{ msg:"2" }, methods:{ } }) </script>

簡述vue的雙向數據綁定步驟（Vue入門系列六v-model）7

Vue入門系列：六 v-model 雙向數據綁定 select

頁面輸出

簡述vue的雙向數據綁定步驟（Vue入門系列六v-model）8

當我們改變下拉選項的時候下面選擇的結果也會對應發生變化

簡述vue的雙向數據綁定步驟（Vue入門系列六v-model）9

另外 checkbox radio 等表單元素大家可以自行嘗試,