vue中computed和watch的使用實例代碼解析
更新時間：2022年04月02日 10:20:13 作者：wanglingli95
這篇文章主要介紹了vue中computed和watch的綜合運用實例,主要需求是點擊按鈕實現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
需求：
- 1.點擊按鈕實現(xiàn)天氣的切換；
- 2.用watch進行監(jiān)視天氣產(chǎn)生變化的數(shù)據(jù)；
實現(xiàn)代碼（helloworld.vue實現(xiàn)代碼）：
<template>
<!-- 準(zhǔn)備好一個容器-->
<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()中已經(jīng)定義好的數(shù)據(jù)。
到此這篇關(guān)于vue中computed和watch的綜合運用實例的文章就介紹到這了,更多相關(guān)vue computed和watch運用實例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue項目打包后proxyTable代理失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。2023-05-05
詳解vue.js移動端導(dǎo)航navigationbar的封裝
本篇文章主要介紹了vue.js移動端導(dǎo)航navigationbar的封裝，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了 Vue press 支持圖片放大功能,本文通過代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
路由是可以傳遞參數(shù)的，一般使用query進行傳參，有兩種方式，本溫酒通過代碼示例給大家介紹這兩種傳遞方式，感興趣的小伙伴可以參考閱讀2023-06-06
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了vue路由的相關(guān)資料，文中講解非常細致，幫助大家更好的理解和學(xué)習(xí)vue路由知識，感興趣的朋友可以了解下2020-08-08
這篇文章主要介紹了Vue兩種組件類型:遞歸組件和動態(tài)組件的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定原理
這篇文章主要介紹了proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定原理,文章以介紹proxy的優(yōu)點開始展開全文內(nèi)容，圍繞proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定的相關(guān)資料，,需要的朋友可以參考一下2021-12-12
Vue?element-ui表格內(nèi)嵌進度條功能實現(xiàn)方法
Element-Ul是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui表格內(nèi)嵌進度條功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue3中的伸縮菜單組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01