偵聽器
雖然計算屬性和偵聽器的功能類似，資料變化就會觸發某個函式，但是當需要在資料變化時執行異步或開銷較大的操作時，偵聽器這個方式是最有用的，
偵聽器的用法
watch:{
elName:function(val){
}
}
偵聽器觸發的功能函式寫在watch屬性里，函式名與所偵聽資料的名字一一對應，函式的引數為所偵聽資料的值
用戶名驗證案例
<div id="app">
<div>
<label for="">用戶名：</label>
<input type="text" v-model.lazy="username">
<span>{{tip}}</span>
</div>
</div>
var vm = new Vue({
el: '#app',
data: {
username: '',
tip: ''
},
methods: {
checkUsername: function(username) {
// 使用定時任務的方式模擬介面的呼叫
var that = this;
setTimeout(function() {
// 模擬介面呼叫
if (username == 'cmy') {
that.tip = "用戶名已存在";
} else {
that.tip = "用戶名可以使用";
}
}, 2000);
}
},
watch: {
username: function(val) {
// 呼叫后臺介面，驗證用戶名的合法性
this.checkUsername(val);
this.tip = "驗證中...";
}
}
});
當username屬性的值改變時，就會觸發watch里的對應函式，為避免頻繁觸發，可以使用lazy修飾符將觸發的方式設定成失焦事件
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/260070.html
標籤：其他