vue中v-model的數據雙向綁定(重要)
阿新 • • 發佈：2018-12-01
area 忽略 數據綁定 -c ctype return option lan 關聯
<!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>
vue中v-model的數據雙向綁定(重要)