Vue監(jiān)聽(tīng)器簡(jiǎn)單使用及注意事項(xiàng)說(shuō)明
更新時(shí)間：2024年08月15日 09:30:47 作者：專注寫(xiě)bug
這篇文章主要介紹了Vue監(jiān)聽(tīng)器簡(jiǎn)單使用及注意事項(xiàng)說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
前言
監(jiān)聽(tīng)器，在官網(wǎng)中稱為偵聽(tīng)器，個(gè)人還是喜歡稱之為監(jiān)聽(tīng)器。
官方文檔如下：
編寫(xiě)簡(jiǎn)單demo
偵聽(tīng)器在項(xiàng)目中通常用于監(jiān)聽(tīng)某個(gè)屬性變量值的變化，并根據(jù)該變化做出一些處理操作。
最簡(jiǎn)單的案例如下所示：
<template>
<h1>偵聽(tīng)器</h1>
<p>{{ msg }}</p>
<button @click="changeMsgHandler">點(diǎn)擊一下 就送屠龍寶刀</button>
</template>
<script>
export default{
data(){
return{
msg:"專注寫(xiě) bug"
}
},
methods:{
changeMsgHandler(){
var newMessage = this.msg.split('').reverse().join('');
this.msg = newMessage;
}
},
// 偵聽(tīng)器
watch:{
// 監(jiān)聽(tīng)器的名稱必須與被監(jiān)聽(tīng)的屬性名稱保持一致
msg(newVal,oldVal){
console.log("newVal===>"+newVal);
console.log("oldVal===>"+oldVal);
}
}
}
</script>頁(yè)面初次加載時(shí)，頁(yè)面中顯示效果如下所示：
當(dāng)按鈕點(diǎn)擊后，頁(yè)面與控制臺(tái)中的信息如下所示：
注意事項(xiàng)
對(duì)某個(gè)變量進(jìn)行偵聽(tīng)變化時(shí)，需要使用到watch選項(xiàng)。
偵聽(tīng)器watch中的方法名必須與實(shí)際變量名稱保值一致，否則會(huì)出現(xiàn)無(wú)法偵聽(tīng)的問(wèn)題。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
大家都知道vue-router有兩種模式，hash模式和history模式，帶＃的則是hash模式。接下來(lái)給大家?guī)?lái)了Vue 去除路徑中的＃號(hào)的解決方法，感興趣的朋友一起看看吧2018-04-04
vue中ts無(wú)法識(shí)別引入的vue文件,提示找不到xxx.vue模塊的解決
這篇文章主要介紹了vue中ts無(wú)法識(shí)別引入的vue文件,提示找不到xxx.vue模塊的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
通過(guò)實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件
這篇文章主要介紹了通過(guò)實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了在antd4.0中Form使用initialValue操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要為大家介紹了vue組件生命周期鉤子使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
element表格數(shù)據(jù)部分模糊的實(shí)現(xiàn)代碼
這篇文章給大家介紹了element表格數(shù)據(jù)模糊的實(shí)現(xiàn)代碼,文中有詳細(xì)的效果展示和實(shí)現(xiàn)代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01
使用vue3搭建后臺(tái)系統(tǒng)的詳細(xì)步驟
這篇文章主要介紹了使用vue3搭建后臺(tái)系統(tǒng)的過(guò)程記錄,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
使用vue.js寫(xiě)一個(gè)tab選項(xiàng)卡效果
Vue 實(shí)現(xiàn) Tab切換實(shí)現(xiàn)的場(chǎng)景很多，比如，利用vue-router、利用第三方插件、利用組件等等.本文使用組件來(lái)實(shí)踐tab選項(xiàng)卡2017-03-03
Vue3如何解決Element-plus不生效的問(wèn)題
這篇文章主要介紹了Vue3如何解決Element-plus不生效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue中transition的使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07