<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<p>全名:{{fullName}}</p>
</div>
<script>
// 監聽器能夠用來監聽data中數據的變化,並且執行相應的操作
var vm = new Vue({
el: '#app',
data: {
firstName: '李',
lastName: '白',
// 定義變量來接受新的全名
fullName: ''
},
// 創建監聽器在watch屬性中
watch: {
// 要監聽誰,就將該變量拿過來作爲一個函數名字, 這個函數中帶有newVal, 和 oldVal兩個參數,參數名字隨意
firstName(newVal, oldVal) {
console.log(newVal, oldVal);
this.fullName = newVal + this.lastName
},
lastName(newVal, oldVal) {
this.fullName = this.firstName + newVal
}
}
// watch 和 computed對比
// 1. computed性能比watch更好,我們能用computed實現就用computed去實現
// 2. 涉及到異步數據的時候,就需要用watch
})
</script>
watch監聽器的簡單使用
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.