vue中computed和watch的使用实例代码解析
更新时间：2022年04月02日 10:20:13 作者：wanglingli95
这篇文章主要介绍了vue中computed和watch的综合运用实例,主要需求是点击按钮实现天气的切换效果结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
需求：
- 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()中已经定义好的数据。
到此这篇关于vue中computed和watch的综合运用实例的文章就介绍到这了,更多相关vue computed和watch运用实例内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了快速解决element的autofocus失效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vue实现选择城市功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-05-05
这篇文章主要介绍了Vue3 响应式数据 reactive使用方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue实现按钮的长按功能,点击按钮实现长按，用户需要按下按钮几秒钟，然后触发相应的事件，本文通过实例代码给大家分享实现思路，感兴趣的朋友一起看看吧2022-01-01
h()函数是Vue.js中的一个工具函数,用于创建虚拟DOM节点,具有更高的灵活性和控制力,本文介绍Vue h函数到底是个啥,感兴趣的朋友一起看看吧2025-02-02
在vue-cli脚手架中配置一个vue-router前端路由
这篇文章主要给大家介绍了在vue-cli脚手架中配置一个vue-router前端路由的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
这篇文章主要介绍了Vite比Vue CLI快在哪里，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了浅谈vue加载优化策略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了vue的状态更新方式(异步更新解决)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
一个优雅展示树形结构数据的 Vue 组件,递归渲染每个节点及其子节点,支持自定义颜色、文本和布局,通过独特的样式巧妙处理不同层级,为用户打造丰富的视觉盛宴,文中通过代码给大家介绍的非常详细,感兴趣的同学可以自己动手尝试一下2024-02-02
最新评论