Vue學習之路(五)----Computed計算屬性與watch監聽
阿新 • • 發佈:2019-01-26
1.computed計算屬性常用於當value值變化時重新對值進行計算。舉個簡單的例子(當輸入框中的value值變化時,輸出結果為無數字的字串):
//html
<input type="text" v-model="value"/>{{valueWithoutNum}}
//data中
data () {
value: ''
}
//computed屬性中
computed: {
vauleWithoutNum: function (){
return this.value.replace('/\d/g','');//將輸入的數字變為空
}
}
結果圖
2.watch常用於監聽一個數據的變化,有時候,當資料變化時我們需要不斷的去執行一個函式,這個時候就需要用到watch了
//html
<input type="text" v-model="value"/>
//data
data () {
value: ''
}
//methods
methods: {
getNum () {
console.log('獲取到了資料');
}
}
//watch
watch: {
value: funciton(newVal, oldVal){//newVal當前的值,old變化之前的值
this.getNum();
}
}
結果圖