vue2.0 v-model指令
阿新 • • 發佈：2017-09-08
輸入 scrip 監聽 變化 span del min color rop
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue2.2.js"></script> </head> <body> <div id="app"> <input type="text" v-model="userName" /><input type="text" V-model.lazy="msg" /> <input type="text" V-model.number="num" /> <p>{{userName}}</p> <p>{{msg}}</p> <p>{{num}}</p> <!--.lazy：取代 imput 監聽 change 事件。 .number：輸入字符串轉為數字。 .trim：輸入去掉首尾空格。--> <!--通過v-once指令能執行一次性的插值，當數據變化時，插值處的內容不會更新。--> <p v-once>一次改變{{userName}}</p> </div> <script> var vm = new Vue({ el: "#app", data: { userName: "張三", msg:"懶加載", num: "222222" } }) vm.userName = ‘李四‘ </script> </body> </html>
雙向綁定原理：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue雙向綁定的核心原理getter和setter</title> </head> <body> <input type="text" id="inp" value="admin" /> <script> var inp = document.getElementById("inp"); Object.defineProperty(inp, "v-model", { //對象自定義按鍵修飾符別名 set: function(val) { this.value = val //this指的是input }, get: function() { return this.value; } }) console.log(inp[‘v-model‘]) inp["v-model"] = "hello" //vue就是利用這個set/get進行雙向綁定,為什麽我們一直要說是setter/getter //因為setter與getter是面向對象語言中的一個特性,利用getter可以獲取對象的屬性,利用setter可以設置對象的屬性. </script> </body> </html>
vue2.0 v-model指令