快捷導(dǎo)航

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

快速解決element的autofocus失效問(wèn)題
這篇文章主要介紹了快速解決element的autofocus失效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
Vue實(shí)現(xiàn)選擇城市功能
這篇文章主要介紹了Vue實(shí)現(xiàn)選擇城市功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-05-05
Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法
這篇文章主要介紹了Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-11-11
vue實(shí)現(xiàn)按鈕的長(zhǎng)按功能
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕的長(zhǎng)按功能,點(diǎn)擊按鈕實(shí)現(xiàn)長(zhǎng)按，用戶需要按下按鈕幾秒鐘，然后觸發(fā)相應(yīng)的事件，本文通過(guò)實(shí)例代碼給大家分享實(shí)現(xiàn)思路，感興趣的朋友一起看看吧
2022-01-01
一文解析Vue h函數(shù)到底是個(gè)啥
h()函數(shù)是Vue.js中的一個(gè)工具函數(shù),用于創(chuàng)建虛擬DOM節(jié)點(diǎn),具有更高的靈活性和控制力,本文介紹Vue h函數(shù)到底是個(gè)啥,感興趣的朋友一起看看吧
2025-02-02
在vue-cli腳手架中配置一個(gè)vue-router前端路由
這篇文章主要給大家介紹了在vue-cli腳手架中配置一個(gè)vue-router前端路由的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
Vite和Vue CLI的優(yōu)劣
這篇文章主要介紹了Vite比Vue CLI快在哪里，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2021-01-01
淺談vue加載優(yōu)化策略
這篇文章主要介紹了淺談vue加載優(yōu)化策略，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
vue的狀態(tài)更新方式(異步更新解決)
這篇文章主要介紹了vue的狀態(tài)更新方式(異步更新解決)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于vue實(shí)現(xiàn)多功能樹(shù)形結(jié)構(gòu)組件的示例代碼
一個(gè)優(yōu)雅展示樹(shù)形結(jié)構(gòu)數(shù)據(jù)的 Vue 組件,遞歸渲染每個(gè)節(jié)點(diǎn)及其子節(jié)點(diǎn),支持自定義顏色、文本和布局,通過(guò)獨(dú)特的樣式巧妙處理不同層級(jí),為用戶打造豐富的視覺(jué)盛宴,文中通過(guò)代碼給大家介紹的非常詳細(xì),感興趣的同學(xué)可以自己動(dòng)手嘗試一下
2024-02-02