vue建立監聽
阿新 • • 發佈:2017-09-21
span 監聽 lac 實例 net tex 數據 nbsp style
<body>
<div id="app">
//msg是className+idName
<h1>{{ msg }}</h1>
//使用v-model關聯實例數據中的className和idName
className:<input type="text" v-model="className" placeholder="輸入類名值">
idName:<input type="text" v-model="idName" placeholder="輸入id值">
</div>
<script> var vm = new Vue({ el: "#app", data: { className: "one", idName: "two", msg: "onetwo" },
//通過watch選項建立監聽
watch: {
/ / 監聽的方法要和監聽的屬性名字相同
//建立監聽,分別監聽到實例中className和idName兩個值的變化
className(newValue, oldValue){
this.msg = newValue + this.idName;
},
idName(newValue, oldValue){
this.msg = this.className + newValue;
}
}
})
</script>
</body>
<script> var vm = new Vue({ el: "#app", data: { className: "one", idName: "two", msg: "onetwo" },
vue建立監聽