vue中computed和watch的使用實例代碼解析
更新時間：2022年04月02日 10:20:13 作者：wanglingli95
這篇文章主要介紹了vue中computed和watch的綜合運用實例,主要需求是點擊按鈕實現天氣的切換效果結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
需求：
- 1.點擊按鈕實現天氣的切換；
- 2.用watch進行監(jiān)視天氣產生變化的數據；
實現代碼（helloworld.vue實現代碼）：
<template>
<!-- 準備好一個容器-->
<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)聽的對象都是在data()中已經定義好的數據。
到此這篇關于vue中computed和watch的綜合運用實例的文章就介紹到這了,更多相關vue computed和watch運用實例內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了快速解決element的autofocus失效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue實現選擇城市功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了Vue3 響應式數據 reactive使用方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue實現按鈕的長按功能,點擊按鈕實現長按，用戶需要按下按鈕幾秒鐘，然后觸發(fā)相應的事件，本文通過實例代碼給大家分享實現思路，感興趣的朋友一起看看吧2022-01-01
h()函數是Vue.js中的一個工具函數,用于創(chuàng)建虛擬DOM節(jié)點,具有更高的靈活性和控制力,本文介紹Vue h函數到底是個啥,感興趣的朋友一起看看吧2025-02-02
在vue-cli腳手架中配置一個vue-router前端路由
這篇文章主要給大家介紹了在vue-cli腳手架中配置一個vue-router前端路由的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-07-07
這篇文章主要介紹了Vite比Vue CLI快在哪里，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了淺談vue加載優(yōu)化策略，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue的狀態(tài)更新方式(異步更新解決)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
一個優(yōu)雅展示樹形結構數據的 Vue 組件,遞歸渲染每個節(jié)點及其子節(jié)點,支持自定義顏色、文本和布局,通過獨特的樣式巧妙處理不同層級,為用戶打造豐富的視覺盛宴,文中通過代碼給大家介紹的非常詳細,感興趣的同學可以自己動手嘗試一下2024-02-02