2.6、vue2中侦听属性的变化
2.6.1、侦听属性作用
侦听属性的变化其实就是监视某个属性的变化。当被监视的属性一旦发生改变时,执行某段代码。
2.6.2、watch配置项
监视属性变化时需要使用watch配置项
可以监视多个属性,监视哪个属性,请把这个属性的名字拿过来即可。
i.可以监视Vue的原有属性
ii.如果监视的属性具有多级结构,一定要添加单引号:'a.b'
iii.无法直接监视对象深层次属性,如a.b,b属性压根不存在。
iv.启用深度监视,默认是不开启深度监视的。
v.也可以监视计算属性
2.6.3、如何深度监视:
(1) 监视多级结构中某个属性的变化,写法是:’a.b.c’ : {}。注意单引号哦。
(2) 监视多级结构中所有属性的变化,可以通过添加深度监视来完成:deep : true
2.6.4、 如何后期添加监视:
(1) 调用API:vm.$watch(‘number1’, {})
2.6.5、 watch的简写:
(1) 简写的前提:当不需要配置immediate和deep时,可以简写。
(2) 如何简写?
① watch:{
number1(newVal,oldVal){},
number2(newVal, oldVal){}
}
(3) 后期添加的监视如何简写?
① vm.$watch(‘number1’, function(newVal, oldVal){})
<body><div id="app"><h1>{{msg}}</h1>数字:<input type="text" v-model="number" /><br />数字:<input type="text" v-model="a.b" /><br />数字:<input type="text" v-model="a.c" /><br />数字:<input type="text" v-model="a.d.e.f" /><br />数字(后期添加监视):<input type="text" v-model="number2" /><br /></div><script>const vm = new Vue({el: "#app",data: {msg: "侦听属性的变化",// 原有属性number: 0,// 多层次属性a: {b: 0,c: 0,d: {e: {f: 0,},},},number2: 0,},// 计算属性computed: {hehe() {return "haha" + this.number;},},watch: {//1、可以监视多个属性,监视哪个属性,请把这个属性的名字拿过来即可。//1.1 可以监视Vue的原有属性/* number : {// 初始化的时候,调用一次handler方法。immediate : true,// 这里有一个固定写死的方法,方法名必须叫做:handler// handler方法什么时候被调用呢?当被监视的属性发生变化的时候,handler就会自动调用一次。// handler方法上有两个参数:第一个参数newValue,第二个参数是oldValue// newValue是属性值改变之后的新值。// oldValue是属性值改变之前的旧值。handler(newValue, oldValue){console.log(newValue, oldValue)// this是当前的Vue实例。// 如果该函数是箭头函数,这个this是window对象。不建议使用箭头函数。console.log(this)}}, *///1.2 如果监视的属性具有多级结构,一定要添加单引号:'a.b'/* 'a.b' : { handler(newValue, oldValue){console.log('@')} },'a.c' : { handler(newValue, oldValue){console.log('@')} }, */// 无法监视b属性,因为b属性压根不存在。/* b : { handler(newValue, oldValue){console.log('@')} } *///1.3 启用深度监视,默认是不开启深度监视的。a: {// 什么时候开启深度监视:当你需要监视一个具有多级结构的属性,并且监视所有的属性,需要启用深度监视。deep: true,handler(newValue, oldValue) {console.log("@");},},//1.4 也可以监视计算属性/* hehe : {handler(a , b){console.log(a, b)}} *///2、 监视某个属性的时候,也有简写形式,什么时候启用简写形式?// 当只有handler回调函数的时候,可以使用简写形式。number(newValue, oldValue) {console.log(newValue, oldValue);},},});//3、 如何后期添加监视?调用Vue相关的API即可。//3.1 语法:vm.$watch('被监视的属性名', {})/* vm.$watch('number2', {immediate : true,deep : true,handler(newValue, oldValue){console.log(newValue, oldValue)}}) *///3.2 这是后期添加监视的简写形式。vm.$watch("number2", function (newValue, oldValue) {console.log(newValue, oldValue);});</script></body>
2.6.6. computed和watch如何选择?
比大小的案例
2.6.6.1、watch实现
<body><div id="app"><h1>{{msg}}</h1>数值1:<input type="number" v-model="num1" /><br />数值2:<input type="number" v-model="num2" /><br />比较大小:{{compareResult}}</div><script>const vm = new Vue({el: "#app",data: {msg: "比较大小的案例",num1: 0,num2: 0,compareResult: "",},watch: {// 监视num1num1: {immediate: true,handler(val) {let result = val - this.num2;if (result == 0) {this.compareResult = val + " = " + this.num2;} else if (result > 0) {this.compareResult = val + " > " + this.num2;} else {this.compareResult = val + " < " + this.num2;}},},// 监视num2num2: {immediate: true,handler(val) {let result = this.num1 - val;if (result == 0) {this.compareResult = this.num1 + " = " + val;} else if (result > 0) {this.compareResult = this.num1 + " > " + val;} else {this.compareResult = this.num1 + " < " + val;}},},},});</script></body>
2.6.6.2、computed实现
<body><div id="app"><h1>{{msg}}</h1>数值1:<input type="number" v-model="num1" /><br />数值2:<input type="number" v-model="num2" /><br />比较大小:{{compareResult}}</div><script>const vm = new Vue({el: "#app",data: {msg: "比较大小的案例",num1: 0,num2: 0,},computed: {// 计算属性的简写形式compareResult() {let result = this.num1 - this.num2;if (result == 0) {return this.num1 + " = " + this.num2;} else if (result > 0) {return this.num1 + " > " + this.num2;} else {return this.num1 + " < " + this.num2;}},},});</script></body>
2.6.6.3、总结
(1) 以上比较大小的案例可以用computed完成,并且比watch还要简单。所以要遵守一个原则:computed和watch都能够完成的,优先选择computed。
(2) 如果要开启异步任务,只能选择watch。因为computed依靠return。watch不需要依赖return。
比较大小的案例:延迟3s出现结果
watch: {// 监视num1num1: {immediate: true,handler(val) {let result = val - this.num2;// 需求2:3s后出现比较结果// 此时使用箭头函数,箭头函数没有this,会向上找到num1,num1是vm的属性,// 如果将此时箭头函数转成普通函数,this就会是windowsetTimeout(() => {if (result == 0) {this.compareResult = val + " = " + this.num2;} else if (result > 0) {this.compareResult = val + " > " + this.num2;} else {this.compareResult = val + " < " + this.num2;}}, 3000);},},// 监视num2num2: {immediate: true,handler(val) {let result = this.num1 - val;setTimeout(() => {if (result == 0) {this.compareResult = this.num1 + " = " + val;} else if (result > 0) {this.compareResult = this.num1 + " > " + val;} else {this.compareResult = this.num1 + " < " + val;}}, 3000);},},},
computed: {// 计算属性的简写形式// 计算结果3s后显示,由于setTimeout是异步的,是有js引擎调用的,所以它的this是window,可以使用箭头函数compareResult() {setTimeout(() => {let result = this.num1 - this.num2;if (result == 0) {return this.num1 + " = " + this.num2;} else if (result > 0) {return this.num1 + " > " + this.num2;} else {return this.num1 + " < " + this.num2;}}, 3000);},
2.6.7. 关于函数的写法,写普通函数还是箭头函数?
(1) 不管写普通函数还是箭头函数,目标是一致的,都是为了让this和vm相等。
(2) 所有Vue管理的函数,建议写成普通函数。
(3) 所有不属于Vue管理的函数,例如setTimeout的回调函数、Promise的回调函数、AJAX的回调函数,建议使用箭头函数。
相关文章:
2.6、vue2中侦听属性的变化
2.6.1、侦听属性作用侦听属性的变化其实就是监视某个属性的变化。当被监视的属性一旦发生改变时,执行某段代码。2.6.2、watch配置项监视属性变化时需要使用watch配置项 可以监视多个属性,监视哪个属性,请把这个属性的名字拿过来即可。 i.可以监视Vue的原有属性 ii.如果监视的…...
enable_shared_from_this
用途 struct S {shared_ptr<S> dangerous(){return shared_ptr<S>(this); // dont do this!} };int main() {shared_ptr<S> sp1(new S);shared_ptr<S> sp2 sp1->dangerous();return 0; }考虑以上代码,从一个被shared_ptr管理的struc…...
重生之我在异世界学智力题(2)
大家好,这里是小编的博客频道 小编的博客:就爱学编程 很高兴在CSDN这个大家庭与大家相识,希望能在这里与大家共同进步,共同收获更好的自己!!! 本文目录 引言智力题:逃离孤岛智力题&a…...
深入解析下oracle的number底层存储格式
oracle数据库中,number数据类型用来存储数值数据,它既可以存储负数数值,也可以存储正数数值。相对于其他类型数据,number格式的数据底层存储格式要复杂得多。今天我们就详细探究下oracle的number底层存储格式。 一、环境搭建 1.…...
prometheus
1.安装,tar包,解压即用 tar xf prometheus-2.33.3.linux-amd64.tar.gz -C /app/tools/ 2.创建软链接 ln -s prometheus-2.33.3.linux-amd64/ /app/tools/prometheus 3.进入目录 cd /app/tools/prometheus 4.运行 ./prometheus 5.此时࿰…...
C# 23种设计模式(1)单例模式(单件模式)
一、单例模式介绍 单例模式(Singleton Pattern)是一种创建型设计模式,它确保一个类只有一个实例,并提供一个全局访问点。这个模式在需要一个对象被共享且全局唯一的情况下非常有用,比如配置对象、日志对象、数据库连接…...
Javaweb:HTML、CSS
学习 资源1 学习资源 2 黑马javaweb HTML 1、基础标签、样式 图片标签:<img> src:绝对路径、相对路径(绝对磁盘路径,网络路径;./当前目录)width:宽度(百分比)height:高度(百分比&…...
SmartDV将SDIO系列IP授权给RANiX开发车联网(V2X)产品
双方的合作将增强符合ISO 26262标准的车联网(V2X)系统的通信和连接能力,加速实现更安全、更智能的汽车系统和车辆创新 加利福尼亚州圣何塞市,2024年12月——灵活、高度可配置、可定制化的半导体设计知识产权(IP&#…...
【Android】创建型设计模式—单例模式、工厂模式、建造者模式
单例模式 单例模式(Singleton Pattern)是一种创建型设计模式,它确保一个类只有一个实例,并提供全局访问点。 单例模式类图: #mermaid-svg-kzf6IdXdYeNOHtP0 {font-family:"trebuchet ms",verdana,arial,sa…...
ida9pro压缩包
资源类型的博客大部分都是为了自己某天换新机了用 下载链接2:ida9.zip 下载链接1:https://mega.nz/folder/yiAiVDAa#T0kogEE7ufqy0x0EpCuOLQ 主目录下该文件为证书文件 ida9中选择它,就可以了...
前端入门之VUE--vue组件化编程
前言 VUE是前端用的最多的框架;这篇文章是本人大一上学习前端的笔记;欢迎点赞 收藏 关注,本人将会持续更新。 文章目录 2、Vue组件化编程2.1、组件2.2、基本使用2.2.1、VueComponent 2、Vue组件化编程 2.1、组件 组件:用来实现…...
C++是如何工作的?
首先来看一个最基本的C程序段。 #include <iostream>int main() {std::cout << "HelloWorld" << std::endl;std::cin.get(); } 第一行 #include 的含义是预处理的意思,这条语句的作用是将一个名为iostream的文件拷贝到源代码中这个…...
JavaScript中的this, 究竟指向什么?
在JavaScript代码的不同位置中,this所指向的数据是不一样的。比如大部分同学都知道,在对象的函数属性方法中,this指向对象本身;在构造函数中,this指向要生成的新对象。事实上,this指向的逻辑不止这几种&…...
JavaWeb学习(3)(Servlet详细、Servlet的三种实现方式(面试)、Servlet的生命周期、传统web.xml配置Servlet(了解))
目录 一、Servlet详细。 (1)基本介绍。 (2)基本作用。 1、接收客户端请求数据。 2、处理请求。 3、完成响应结果。 二、Servlet的三种实现方式。 (1)实现javax.servlet.Servlet接口。 1、基本介绍。 2、代码…...
【图像去雾数据集】URHI数据集介绍
URHI数据集对应论文:RESIDE: A Benchmark for Single Image Dehazing(2017) URHI数据集下载链接:https://sites.google.com/site/boyilics/website-builder/reside 为便于下载,将上述官方提供的链接中百度云链接粘贴如…...
Playwright中Page类的方法
导航和页面操作 goto(url: str, **kwargs: Any): 导航到一个URL。 reload(**kwargs: Any): 重新加载当前页面。 go_back(**kwargs: Any): 导航到会话历史记录中的前一个页面。 go_forward(**kwargs: Any): 导航到会话历史记录中的下一个页面。 set_default_navigation_tim…...
算力介绍与解析
算力(Computing Power)是指计算机系统在单位时间内处理数据和执行计算任务的能力。算力是衡量计算机性能的重要指标,直接影响计算任务的速度和效率。 算力的分类和单位 a. 基础算力:以CPU的计算能力为主。适用于各个领域的计算。…...
CentOS 上如何查看 SSH 服务使用的端口号?
我们知道,linux操作系统中的SSH默认情况下,端口是使用22,但是有些线上服务器并不是使用的默认端口,那么这个时候,我们应该如何快速知道SSH使用的哪个端口呢? 1、通过配置文件查看 cat /etc/ssh/sshd_confi…...
每日算法Day03
1.19.删除链表的倒数第N个节点 算法链接: 19. 删除链表的倒数第 N 个结点 - 力扣(LeetCode) 类型: 链表 难度: 中等 思路:采用双指针法,控制两个指针之间的距离为n个节点 易错点:返回节点的确定和头节点的处理&…...
【漏洞复现】Apache Solr 身份认证绕过导致任意文件读取漏洞复现(CVE-2024-45216)
🏘️个人主页: 点燃银河尽头的篝火(●’◡’●) 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦 【漏洞复现】Apache Solr 身份认证绕过导致任意文件读取漏洞复现(CVE-2024-45216) 一、漏洞概述1.1漏洞简介1.2组件描述1.3漏洞描述二、漏洞复现2.1 应用协议2.2 环境…...
若依将数据库更改为SQLite
文章目录 1. 添加依赖项2. 更新配置文件 application-druid.yml2.1. 配置数据源2.2. 配置连接验证 3. 更新 MybatisPlusConfig4. 解决 mapper 中使用 sysdate() 的问题4.1. 修改 BaseEntity4.2. 修改 Mapper 5. 更新 YML 配置 正文开始: 前提条件:在您的…...
ubuntu远程桌面开启opengl渲染权限
背景 最近用windows的【远程桌面连接】登录ubuntu后(xrdp协议),发现gl环境是集显的,但是本地登录ubuntu桌面后是独显(英伟达),想要在远程桌面上也用独显渲染环境。 一、查看是独显还是集显环境…...
Scala的泛型
需求:定义一个名为getMiddleEle 的方法用它来获取当前的列表的中间位置的值中间位置的下标 长度/2目标:getMiddleEle(List(1,2,3,4,5)) > 5/2 2 > 下标为2的元素是:3 getMiddleEle(List(1,2,3,4)) > 4/2 2 > 下标为2的元素是:3格式如下: 定义一个函数的格式:def…...
每隔一秒单片机向电脑发送一个16进制递增数据
SCON0x50 SM00 SM11(工作方式为方式一) REN1允许单片机从电脑接收数据 TB8 RB8 SM2是方式2和方式3直接配置为0 TI为发送中断请求标志位 由硬件配置为1 必须由 软件复位为0,RI为接收中断请求标志位,同理TI UART.c #include &l…...
轻量级日志管理平台:Grafana Loki搭建及应用(详细篇)
前言 Grafana Loki是Grafana Lab团队提供的一个水平可扩展、高可用性、多租户的日志聚合系统,与其他日志系统不同的是,Loki最初设计的理念是为了为日志建立标签索引,而非将原日志内容进行索引。 现在目前成熟的方案基本上都是:L…...
React和Vue.js的相似性和差异性是什么?
React和Vue.js都是现代前端开发中广泛使用的JavaScript框架,它们都旨在提高开发效率和组件化开发。以下是他们的一些相似性和差异性: 相似性 组件化:两者都支持组件化开发,允许开发者将UI拆分成独立的、可复用的组件。虚拟DOM&a…...
跨域 Cookie 共享
跨域请求经常遇到需要携带 cookie 的场景,为了确保跨域请求能够携带用户的认证信息或其他状态,浏览器提供了 withCredentials 这个属性。 如何在 Axios 中使用 withCredentials 为了在跨域请求中携带 cookie,需要在 Axios 配置中设置 withCr…...
全国青少年信息学奥林匹克竞赛(信奥赛)备考实战之计数器与累加器(一)
学习背景: 在现实生活中一些需要计数的场景下我们会用到计数器,如空姐手里记录乘客的计数器,跳绳手柄上的计数器等。累加器是累加器求和,以得到最后的结果。计数器和累加器它们虽然是基础知识,但是应用广泛࿰…...
红黑树(Red-Black Tree)
一、概念 红黑树(Red Black Tree)是一种自平衡的二叉搜索树,通过添加颜色信息来确保在进行插入和删除操作时,树的高度保持在对数级别,从而保证了查找、插入和删除操作的时间复杂度为 O(log n)。这种树可以很好地解决普…...
火电厂可视化助力提升运维效率
图扑智慧火电厂综合管理平台实现对火电厂关键设备和系统的实时监控和数据分析。图扑可视化不仅优化了运维流程,还增强了安全管理,有效提升了电厂整体运营效率。...
application.yml 和 bootstrap.yml
在 Spring Boot 中,application.yml 和 bootstrap.yml 都是用来配置应用程序的属性文件,通常用于环境配置、服务配置等。但是,它们有一些不同的用途和加载顺序。以下是它们之间的主要区别: 1. application.yml: 主要…...
电子应用设计方案-49:智能拖把系统方案设计
智能拖把系统方案设计 一、引言 随着人们生活水平的提高和对清洁效率的追求,智能拖把作为一种创新的清洁工具应运而生。本方案旨在设计一款功能强大、操作便捷、清洁效果出色的智能拖把系统。 二、系统概述 1. 系统目标 - 实现自动清洁地面,减轻用户劳…...
Model Context Protocol 精选资源列表
Model Context Protocol 精选资源列表 Model Context Protocol 精选资源列表什么是MCP?教程社区说明服务器实现📂 浏览器自动化☁️ 云平台💬 社交👤 数据平台🗄️ 数据库💻 开发者工具🧮 数据科…...
Windows 11 12 月补丁星期二修复了 72 个漏洞和一个零日漏洞
微软于 2024 年 12 月为 Windows 11 发布的补丁星期二修复了其产品生态系统中的 72 个漏洞,包括 Windows 通用日志文件系统驱动程序中一个被积极利用的零日漏洞。 这个严重漏洞可以通过基于堆的缓冲区溢出授予攻击者系统权限,使其成为此版本中优先级最高…...
Python毕业设计选题:基于Hadoop 的国产电影数据分析与可视化_django+spider
开发语言:Python框架:djangoPython版本:python3.7.7数据库:mysql 5.7数据库工具:Navicat11开发软件:PyCharm 系统展示 管理员登录 管理员功能界面 用户管理 免费电影管理 在线论坛 留言反馈 看板展示 系统…...
蓝桥杯我来了
最近蓝桥杯报名快要截止了,我们学校开始收费了,我们学校没有校赛,一旦报名缴费就是省赛,虽然一早就在官网上报名了,但是一直在纠结,和家人沟通,和朋友交流,其实只是想寻求外界的支持…...
大模型qiming面试内容整理-编码能力评估
编码能力评估是大模型相关岗位面试中非常关键的一环,面试官通常希望通过这个环节了解候选人对编程语言、算法与数据结构的掌握情况,以及其在实践中解决实际问题的能力。以下是编码能力评估的常见内容和类型,特别是针对机器学习、大模型和深度学习方向: 编程语言熟练度 ● P…...
Vivado ILA数据导出MATLAB分析
目录 ILA数据导出 分析方式一 分析方式二 有时候在系统调试时,数据在VIVADO窗口获取的信息有限,可结合MATLAB对已捕获的数据进行分析处理 ILA数据导出 选择信号,单击右键后,会有export ILA DATA选项,将其保存成CS…...
Linux内核 -- 字符设备之read write poll基本实现
Linux字符设备:read、write和poll函数实现及完整代码 1. read函数 原型 ssize_t read(struct file *file, char __user *buf, size_t count, loff_t *pos);实现步骤 检查用户缓冲区:使用copy_to_user将数据从内核空间复制到用户空间。返回已读取的字…...
linux部署ansible自动化运维
ansible自动化运维 1,编写ansible的仓库(比赛已经安装,无需关注) 1、虚拟机右击---设置---添加---CD/DVD驱动器---完成---确定 2、将ansible.iso的光盘连接上(右下角呈绿色状态) 3、查看光盘挂载信息 df -h…...
springboot421社区医疗服务可视化系统(论文+源码)_kaic
摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装社区医疗服务可视化系统软件来发挥其高效地信息处理的作用…...
vue渲染时闪光白屏问题怎么解决(笔记)
Vue渲染时出现闪光白屏问题,可能是因为页面内容需要较长时间才能加载完成,而在加载期间,页面会显示白屏或者空白内容,给用户体验带来负面影响。 解决方法: 为标签绑定 v-cloak 在样式中写 v-clock {displaÿ…...
duxapp 2024-12-09 更新 PullView可以弹出到中间,优化CLI使用体验
UI库 修复 Button 禁用状态失效的问题Modal 组件即将停用,请使用 PullView 基础库 PullView side 新增 center 指定弹出到屏幕中间PullView 新增 duration 属性,指定动画时长新增 useBackHandler hook 用来阻止安卓端点击返回键 RN端 修复 windows …...
vue调试插件vue Devtools下载安装
Vue.js Devtools_6.6.3_Chrome插件下载_极简插件 进图官网点击推荐下载下载该调试工具 解压缩找到扩展程序开启开发者模式 将解压缩的文件拖拽到该页面空白处,点击添加扩展程序 点击详情允许访问文件网址 页面右键检查可以发现已经成功添加该页面调试插件...
.net core使用AutoMapper
AutoMapper 是一个用于 .NET 平台的对象映射工具,它简化了不同对象类型之间的转换过程。在软件开发中,尤其是在分层架构的应用程序里,常常需要在不同的对象模型之间进行数据传递,例如从数据库实体到视图模型、DTO(数据…...
HTTP头注入
注入类漏洞经久不衰,多年保持在owasp Top 10的首位。今天就聊聊那些被人遗忘的http头注入。用简单的实际代码进行演示,让每个人更深刻的去认识该漏洞。 3|0HOST注入 在以往http1.0中并没有host字段,但是在http1.1中增加了host字段ÿ…...
110.【C语言】编写命令行程序(1)
目录 1.前置知识 "命令"的含义 运行C语言程序 2.介绍 main函数的参数 实验1 执行结果 实验2 执行结果 修改代码 实验3 分析 方法:遍历数组argv[]中的所有参数 执行结果 修改代码 执行结果 1.前置知识 "命令"的含义 WINR输入cmd,在cmd窗口下…...
k8s 之 StatefulSet
深入理解StatefulSet(一):拓扑状态 k8s有状态与无状态的区别 无状态服务:deployment Deployment被设计用来管理无状态服务的pod,每个pod完全一致.什么意思呢? 无状态服务内的多个Pod创建的顺序是没有顺序的. 无状态服务内的多…...
PTA 7-2 从身份证号码中提取出出生年月
分数 12 作者 崔孝凤 单位 山东理工大学 输入一个18位的身份证号码,提取出年份和月份并输出,请判断输入的号码是否是18位,如果不是请提示"Invalid data,input again!",并重新输入新的号码。 输入格式: 输入一个18位…...
Plugin - 插件开发04_Spring Boot中的SPI机制与Spring Factories实现
文章目录 Pre方案概览使用插件的好处Spring Boot中的SPI机制与Spring Factories实现1. Spring Boot中的SPI机制Spring Factories文件 2. Spring Factories实现原理3. Code3.1 定义一个服务接口3.2 定义 实现类3.3 配置 spring.factories 文件3.4 创建一个Controller来加载插件3…...