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运用实例内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue项目打包后proxyTable代理失效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。2023-05-05
本篇文章主要介绍了vue.js移动端导航navigationbar的封装，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了 Vue press 支持图片放大功能,本文通过代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
路由是可以传递参数的，一般使用query进行传参，有两种方式，本温酒通过代码示例给大家介绍这两种传递方式，感兴趣的小伙伴可以参考阅读2023-06-06
本篇文章主要介绍了Vue常用指令_V-model用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了vue路由的相关资料，文中讲解非常细致，帮助大家更好的理解和学习vue路由知识，感兴趣的朋友可以了解下2020-08-08
这篇文章主要介绍了Vue两种组件类型:递归组件和动态组件的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了proxy实现vue3数据双向绑定原理,文章以介绍proxy的优点开始展开全文内容，围绕proxy实现vue3数据双向绑定的相关资料，,需要的朋友可以参考一下2021-12-12
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,下面这篇文章主要给大家介绍了关于Vue element-ui表格内嵌进度条功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue3中的伸缩菜单组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论