Vue 监视属性-天气案例

2024-05-12 08:48

本文主要是介绍Vue 监视属性-天气案例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 天气案例实现
  • 两个注意事项
  • 监视属性
  • 深度监视
  • 监视的简写形式

天气案例实现

在这里插入图片描述

<div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{isHot:true},methods:{changeWeather(){this.isHot = !this.isHot}},computed:{info(){return this.isHot?'炎热':'凉爽'}}})
</script>

两个注意事项

1、上面我们用到了计算属性 info 来展示天气。如果我们页面中,不用这个计算属性,那么 vue 开发这工具里的计算属性的相关值是不变的

如下,初始值 isHot = true,天气炎热,但我们把页面的值写死,写成一般,不用计算属性展示

    <h2>今天天气很一般</h2>

我们点击切换天气按钮,isHot 值其实已经成了 false,vue 开发者工具中展示计算属性还是炎热
在这里插入图片描述
2、如果点击切换天气按钮时,我们仅仅是把 isHot 取反,我们可以这样写

<button @click="isHot = !isHot">切换天气</button>

之前写的 changeWeather() 也就不需要了

但是如果要做的事不止一件,例如还要维护一个别的数据,最好还是写一个方法

<button @click="isHot = !isHot;x++">切换天气</button>

监视属性

如果我们需要知道 isHot 什么时候发生了变化,可以在上边的代码上增加

watch:{isHot:{//immediate:true,//初始化时让handler()调用一下//handler()什么时候调用?当isHot改变时handler(newValue,oldValue){console.log('isHost被修改了',oldValue,newValue);}}
}

在这里插入图片描述
注意:
1、当设置其中的 immediate:true ,那么初始化的时候 handler() 也会调用一下
2、也能监视计算属性

info:{immediate:true,//初始化时让handler()调用一下handler(newValue,oldValue){console.log('info被修改了',oldValue,newValue);}
}

在这里插入图片描述
3、也可以动态调用

const vm = new Vue({el:'#root',......
})vm.$watch('isHot',{handler(newValue,oldValue){console.log('isHot被修改了',oldValue,newValue);}
})

监视属性watch
1、当被监视的属性变化时,回调函数自动调用,进行相关操作
2、监视的属性必须存在,才能进行监视
3、监视的两种写法:
(1).new Vue 时传入 watch 配置
(2).通过 vm.$watch 监视

深度监视

如果有数据 numbers ,结构如下

numbers:{a:1,b:1
}

现在需要监视其中 a 的变化,写法:

<h3>a的值是{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
new Vue({el:'#root',data:{numbers:{a:1,b:1}},watch:{//监视多级结构中某个属性的变化'numbers.a':{handler(){console.log('a发生了变化');}}}})

在这里插入图片描述
如果是想检测 numbers 中任意值发生变化可以这样写:

<div id="root"><h3>a的值是{{numbers.a}}</h3><button @click="numbers.a++">点我让a+1</button><h3>b的值是{{numbers.b}}</h3><button @click="numbers.b++">点我让b+1</button>
</div>
new Vue({el: '#root',data: {numbers: {a: 1,b: 1}},watch: { //监视多级结构中所有属性的变化numbers: {deep: true,handler() {console.log('numbers发生了变化');}}}})

在这里插入图片描述
其中 deep: true是关键,如果不写是不能实现的

深度监视
(1).vue 中的 watch 默认不监测对象内部值的改变(一层)
(2).配置 deep:true 可以监测对象内部值改变(多层)
备注
(1).vue 自身可以监测对象内部值的改变,但Vue提供的 watch 默认不可以
(2).使用 watch 时根据数据的具体结构,决定是否采用深度监视

监视的简写形式

如果 watch 中只有 handler 时,可以简写:

		watch:{//完整写法/*isHot:{//immediate:true,//初始化时让handler()调用一下//deep: true,//深度监视handler(newValue,oldValue){console.log('isHost被修改了',oldValue,newValue);}}*/isHot(newValue,oldValue){console.log('isHost被修改了',oldValue,newValue);}}

当然也可以动态调用

	//完整写法vm.$watch('isHot',{//immediate:true,//初始化时让handler()调用一下//deep: true,//深度监视handler(newValue,oldValue){console.log('isHost被修改了',oldValue,newValue);}})//简写,简写后就不能写上边的属性了vm.$watch('isHot',function (oldValue,newValue) {console.log('isHost被修改了',oldValue,newValue);})

这篇关于Vue 监视属性-天气案例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/982160

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

深入探索协同过滤:从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤(UserCF)2. 基于物品的协同过滤(ItemCF)3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代,推荐系统成为连接用户与内容的桥梁。本文聚焦于

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善,其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性, 将与教育相关的数据要素在区块链上进行存证确权,在确保数据可信的前提下,促进教育的公平、透明、开放,为教育教学质量提升赋能,实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护,支撑教育资源共享、教学质量评估、

客户案例:安全海外中继助力知名家电企业化解海外通邮困境

1、客户背景 广东格兰仕集团有限公司(以下简称“格兰仕”),成立于1978年,是中国家电行业的领军企业之一。作为全球最大的微波炉生产基地,格兰仕拥有多项国际领先的家电制造技术,连续多年位列中国家电出口前列。格兰仕不仅注重业务的全球拓展,更重视业务流程的高效与顺畅,以确保在国际舞台上的竞争力。 2、需求痛点 随着格兰仕全球化战略的深入实施,其海外业务快速增长,电子邮件成为了关键的沟通工具。

滚雪球学Java(87):Java事务处理:JDBC的ACID属性与实战技巧!真有两下子!

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE啦,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎大家关注&&收藏!持续更新中,up!up!up!! 环境说明:Windows 10