vue中computed和watch的使用實(shí)例代碼解析
更新時(shí)間：2022年04月02日 10:20:13 作者：wanglingli95
這篇文章主要介紹了vue中computed和watch的綜合運(yùn)用實(shí)例,主要需求是點(diǎn)擊按鈕實(shí)現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
需求：
- 1.點(diǎn)擊按鈕實(shí)現(xiàn)天氣的切換；
- 2.用watch進(jìn)行監(jiān)視天氣產(chǎn)生變化的數(shù)據(jù)；
實(shí)現(xiàn)代碼（helloworld.vue實(shí)現(xiàn)代碼）：
<template>
<!-- 準(zhǔn)備好一個(gè)容器-->
<div id="root">
<h2>今天天氣很{{info}}</h2>
<button @click="changeWeather">切換天氣</button>
</div>
</template>
<script>
export default {
name:'HelloWorld',
data(){
return{
isHot:true,
}
},
computed:{
info(){
return this.isHot ? '炎熱' : '涼爽'
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot(val){
console.log("isHot被修改了，isHot值為：",val)
}
}
</script>
<style>
</style>注意：watch監(jiān)聽(tīng)的對(duì)象都是在data()中已經(jīng)定義好的數(shù)據(jù)。
到此這篇關(guān)于vue中computed和watch的綜合運(yùn)用實(shí)例的文章就介紹到這了,更多相關(guān)vue computed和watch運(yùn)用實(shí)例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Vue3?計(jì)算屬性computed的實(shí)現(xiàn)原理
- Vue中computed(計(jì)算屬性)和watch(監(jiān)聽(tīng)屬性)的用法及區(qū)別說(shuō)明
- 關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解
- Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed
- Vue3中的?computed,watch,watchEffect的使用方法
- Vue的computed計(jì)算屬性你了解嗎
- Vue中computed計(jì)算屬性和data數(shù)據(jù)獲取方式
- Vue Computed底層原理深入探究
相關(guān)文章
vue項(xiàng)目打包后proxyTable代理失效問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目打包后proxyTable代理失效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-05-05
詳解vue.js移動(dòng)端導(dǎo)航navigationbar的封裝
本篇文章主要介紹了vue.js移動(dòng)端導(dǎo)航navigationbar的封裝，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了 Vue press 支持圖片放大功能,本文通過(guò)代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
路由是可以傳遞參數(shù)的，一般使用query進(jìn)行傳參，有兩種方式，本溫酒通過(guò)代碼示例給大家介紹這兩種傳遞方式，感興趣的小伙伴可以參考閱讀2023-06-06
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
這篇文章主要介紹了vue路由的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue路由知識(shí)，感興趣的朋友可以了解下2020-08-08
Vue兩種組件類型:遞歸組件和動(dòng)態(tài)組件的用法
這篇文章主要介紹了Vue兩種組件類型:遞歸組件和動(dòng)態(tài)組件的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理
這篇文章主要介紹了proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理,文章以介紹proxy的優(yōu)點(diǎn)開(kāi)始展開(kāi)全文內(nèi)容，圍繞proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定的相關(guān)資料，,需要的朋友可以參考一下2021-12-12
Vue?element-ui表格內(nèi)嵌進(jìn)度條功能實(shí)現(xiàn)方法
Element-Ul是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui表格內(nèi)嵌進(jìn)度條功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue3中的伸縮菜單組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01