vue中computed和watch的综合运用实例

最新推荐文章于 2025-03-30 14:40:36 发布

原创最新推荐文章于 2025-03-30 14:40:36 发布 · 903 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #前端框架

Vue开发专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单天气切换组件。该组件通过点击按钮来改变天气状态，并使用watch监听器实时更新天气信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

1.点击按钮实现天气的切换；
2.用watch进行监视天气产生变化的数据；

实现代码（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>