Vue?監(jiān)視屬性之天氣案例實現(xiàn)
更新時間：2022年05月27日 10:19:23 作者：??奔跑吧雞翅????
這篇文章主要介紹了Vue?監(jiān)視屬性之天氣案例實現(xiàn)，文章以天氣為例展開介紹Vue?監(jiān)視屬性?的相關內(nèi)容，需要的小伙伴可以參考一下
天氣案例實現(xiàn)
<div id="root">
<h2>今天天氣很{{info}}</h2>
<button @click="changeWeather">切換天氣</button>
</div><script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
isHot:true
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
computed:{
info(){
return this.isHot?'炎熱':'涼爽'
}
}
})
</script>兩個注意事項
1、上面我們用到了計算屬性 info 來展示天氣。如果我們把天氣寫死，不用這個計算屬性，那么 vue 開發(fā)這工具里的相關值是不變的
如下，初始值 isHot = true，天氣炎熱，但我們把頁面的值寫死，不用 isHot
我們點擊切換天氣按鈕，vue 開發(fā)者工具中展示的還是炎熱，其實我們通過打印發(fā)現(xiàn)，isHot 值其實已經(jīng)變了
2、如果點擊切換天氣按鈕時，我們僅僅是把 isHot 取反，我們可以這樣寫
<button @click="isHot = !isHot">切換天氣</button>
之前寫的 changeWeather() 也就不需要了
但是如果要做的事不止一件，例如還要維護一個別的數(shù)據(jù)，最好還是寫一個方法
<button @click="isHot = !isHot;x++">切換天氣</button>
監(jiān)視屬性
如果我們需要知道 isHot 什么時候發(fā)生了變化，可以在上邊的代碼上增加
watch:{
isHot:{
//immediate:true,//初始化時讓handler()調(diào)用一下
//handler()什么時候調(diào)用？當isHot改變時
handler(newValue,oldValue){
console.log('isHost被修改了',oldValue,newValue);
}
}
}
注意：
- 1、當設置其中的 immediate:true ，那么初始化的時候 handler() 也會調(diào)用一下
- 2、也能監(jiān)視計算屬性
info:{
immediate:true,//初始化時讓handler()調(diào)用一下
handler(newValue,oldValue){
console.log('info被修改了',oldValue,newValue);
}
}
3、也可以動態(tài)調(diào)用
const vm = new Vue({
el:'#root',
......
})
vm.$watch('isHot',{
handler(newValue,oldValue){
console.log('isHot被修改了',oldValue,newValue);
}
})監(jiān)視屬性watch
- 1、當被監(jiān)視的屬性變化時，回調(diào)函數(shù)自動調(diào)用，進行相關操作
- 2、監(jiān)視的屬性必須存在，才能進行監(jiān)視
監(jiān)視的兩種寫法:
- (1).new Vue 時傳入 watch 配置
- (2).通過 vm.$watch 監(jiān)視
深度監(jiān)視
如果有數(shù)據(jù) numbers ，結(jié)構(gòu)如下
numbers:{
a:1,
b:1
}現(xiàn)在需要監(jiān)視其中 a 的變化，寫法：
<h3>a的值是{{numbers.a}}</h3>
<button @click="numbers.a++">點我讓a+1</button>new Vue({
el:'#root',
data:{
numbers:{
a:1,
b:1
}
},
watch:{
//監(jiān)視多級結(jié)構(gòu)中某個屬性的變化
'numbers.a':{
handler(){
console.log('a發(fā)生了變化');
}
}
}
})
如果是想檢測 numbers 中任意值發(fā)生變化可以這樣寫：
<div id="root">
<h3>a的值是{{numbers.a}}</h3>
<button @click="numbers.a++">點我讓a+1</button>
<h3>b的值是{{numbers.b}}</h3>
<button @click="numbers.b++">點我讓b+1</button>
</div>new Vue({
el: '#root',
data: {
numbers: {
a: 1,
b: 1
}
},
watch: {
//監(jiān)視多級結(jié)構(gòu)中所有屬性的變化
numbers: {
deep: true,
handler() {
console.log('numbers發(fā)生了變化');
}
}
}
})
其中 deep: true是關鍵，如果不寫是不能實現(xiàn)的
深度監(jiān)視
- (1).vue 中的
watch默認不監(jiān)測對象內(nèi)部值的改變（一層） - (2).配置
deep:true可以監(jiān)測對象內(nèi)部值改變（多層）
備注：
- (1).vue 自身可以監(jiān)測對象內(nèi)部值的改變，但Vue提供的 watch 默認不可以
- (2).使用 watch 時根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視
監(jiān)視的簡寫形式
如果 watch 中只有 handler 時，可以簡寫：
watch:{
//完整寫法
/*isHot:{
//immediate:true,//初始化時讓handler()調(diào)用一下
//deep: true,//深度監(jiān)視
handler(newValue,oldValue){
console.log('isHost被修改了',oldValue,newValue);
}
}*/
isHot(newValue,oldValue){
console.log('isHost被修改了',oldValue,newValue);
}
}當然也可以動態(tài)調(diào)用
//完整寫法
vm.$watch('isHot',{
//immediate:true,//初始化時讓handler()調(diào)用一下
//deep: true,//深度監(jiān)視
handler(newValue,oldValue){
console.log('isHost被修改了',oldValue,newValue);
}
})
//簡寫，簡寫后就不能寫上邊的屬性了
vm.$watch('isHot',function (oldValue,newValue) {
console.log('isHost被修改了',oldValue,newValue);
})到此這篇關于Vue 監(jiān)視屬性之天氣案例實現(xiàn)的文章就介紹到這了,更多相關Vue 監(jiān)視屬性 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue中JS動畫與Velocity.js的結(jié)合使用
這篇文章主要介紹了Vue中JS動畫與Velocity.js的結(jié)合使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本篇文章主要介紹了Vue 2.0學習筆記之Vue中的computed屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Vue中關閉當前頁面的方法與原生JavaScript類似,都是通過window對象的close方法實現(xiàn),這篇文章主要介紹了Vue關閉當前頁面的方法,需要的朋友可以參考下2023-09-09
vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法
今天小編就為大家分享一篇vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue-cli創(chuàng)建項目從單頁面到多頁面的方法
本篇文章主要介紹了Vue-cli創(chuàng)建項目從單頁面到多頁面的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue跳轉(zhuǎn)同一路由報錯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了vue最簡單的前后端交互示例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了在vue中實現(xiàn)echarts隨窗體變化，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文主要介紹了vue3使用el-tooltip插槽達到換行效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08