信息发布→ 登录 注册 退出

vue中computed和watch的使用实例代码解析

发布时间:2026-01-11

点击量:

需求:

  • 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>

注意:watch监听的对象都是在data()中已经定义好的数据。

在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!