vue中v-model的資料雙向繫結(重要)
阿新 • • 發佈：2018-12-01
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model="msg"> <!--v-model一般都是資料屬性或者方法裡面宣告的****--> <p>{{ msg }}</p> <textarea placeholder="" v-model="msg"></textarea> <!--只要綁定了v-model msg都會同時改變--> <!--單個複選框--> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <!--多個複選框,繫結到同一個陣列--> <div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox"id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> <br> <!--for 和 id 一樣的值作用就是 點選頁面上的使用者名稱就會自動聚集 跟點選輸入框聚焦的效果一樣--> <label for="username">使用者名稱:</label> <!--懶監聽--> <input type="text" v-model.lazy="msg2" id="username"> <p>{{msg2}}</p> <br> <!--單選框 繫結的是父級標籤select不是option 所以select額度跟 span裡的selected有關聯--> <div id="example-5"> <select v-model="selected"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <!--多選繫結陣列--> <div id="example-6"> <select v-model="selected2" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected2 }}</span> </div> <br> <!--清除前後空格--> <input v-model.trim="msg3"> <p>{{msg3}}</p> </div> </div> <script src="vue.js"></script> <script> // v-model 只能應用在 input textarea select標籤中 //雙向資料繫結:之前的操作都是資料到view的過程(return 返回的資料給回div裡的msg) //先有資料到view,更改view,再有反向的 //一開始return 裡面的msg 在載入頁面的時候就已經放在了div中顯示msg的位置了,有了資料到view的過程 //更改view就是在input輸入框裡改輸入框的變化,就是修改msg, //這時候data中的msg會隨著變化, 進而導致<p>裡面的msg跟著改變 new Vue({ el: "#app", data() { return { msg: "alex", msg2:"wusir", msg3:"", checked: false, checkedNames: [], selected: "", selected2:[], }//怎麼顯示到input的輸入框?以前是用過value屬性,在vue裡value屬性會被忽略掉 } }) </script> </body> </html>