Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析
更新時間：2019年04月25日 10:40:09 作者：guanguan0_0
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作,結(jié)合實例形式分析了vue.js使用Watch針對數(shù)組、對象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作。分享給大家供大家參考，具體如下：
1.普通的watch
data() {
return {
frontPoints: 0
}
},
watch: {
frontPoints(newValue, oldValue) {
console.log(newValue)
}
}
2.數(shù)組的watch：深拷貝
data() {
return {
winChips: new Array(11).fill(0)
}
},
watch: {
winChips: {
handler(newValue, oldValue) {
for (let i = 0; i < newValue.length; i++) {
if (oldValue[i] != newValue[i]) {
console.log(newValue)
}
}
},
deep: true
}
}
3.對象的watch
data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
watch: {
bet: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}
4.對象的具體屬性的watch：
data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
computed: {
pokerHistory() {
return this.bet.pokerHistory
}
},
watch: {
pokerHistory(newValue, oldValue) {
console.log(newValue)
}
}
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
在 Vue-CLI 中引入 simple-mock實現(xiàn)簡易的 API Mock 接口數(shù)據(jù)模擬
本文以 Vue-CLI 為例介紹引入 simple-mock 實現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧2018-11-11
這篇文章主要介紹了vue監(jiān)聽頁面上的報錯信息,window.onerror和window.addEventListener(‘error‘)的區(qū)別,需要的朋友可以參考下2023-10-10
基于Vue、Vuex、Vue-router實現(xiàn)的購物商城(原生切換動畫)效果
這篇文章主要介紹了基于Vue、Vuex、Vue-router實現(xiàn)的購物商城(原生切換動畫)效果,需要的朋友可以參考下2018-01-01
vuex之this.$store.dispatch()與this.$store.commit()的區(qū)別及說明
這篇文章主要介紹了vuex之this.$store.dispatch()與this.$store.commit()的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹的是Vue 組件組織結(jié)構(gòu)及組件注冊，為了能在模板中使用，這些組件必須先注冊以便 Vue 能夠識別。這里有兩種組件的注冊類型：全局注冊和局部注冊。至此，我們的組件都只是通過 Vue.component 全局注冊的，文章學詳細內(nèi)容,需要的朋友可以參考一下2021-10-10
vue.js利用defineProperty實現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當作后臺、jQuery寫前臺AJAX代碼實現(xiàn)用戶登錄和注冊的功能的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了vue slot與傳參實例代碼講解，在文章末尾給大家介紹了vue 利用slot向父組件傳值的方法,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue左側(cè)菜單,樹形圖遞歸實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
vue前端頁面數(shù)據(jù)加載添加loading效果的實現(xiàn)
這篇文章主要介紹了vue前端頁面數(shù)據(jù)加載添加loading效果的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式
這篇文章主要介紹了vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02