vue小结之 watch监听(对象,单个字段属性)

好记性不如个烂笔头:方便每次使用忘记的时候,看看点滴的累积,点滴的成长!

watch监听使用:

1.监听对象:

 <input type="checkbox" id="toggle-button" name="switch" v-model="data.busiCode[0].isLogin">

当isLogin为0 的时候 input:checkbox会为false 1是true。

deep属性:data某对象obj
watch 的一个属性 ,默认值是 false,表示深度监听,比如我们 data 里有busiCode[]数组:监听字段isLogin,

注意关键字deep:一层层的寻找你要监听的字段,直到找到为止!如果没有该属性,则监听不到isLogin。

  watch:{data: {handler(newVal, oldVal) {if(this.data.busiCode[0].isLogin === true){this.data.busiCode[0].isLogin = 1} else if(this.data.busiCode[0].isLogin === false) {this.data.busiCode[0].isLogin = 0}},deep: true} },

监听某字段比如图片宽高的变化,赋值给相应的div:

  watch:{data: {handler(newVal, oldVal) {this.imgDivWidth = this.imgWh;//监听图片宽,设置div宽度this.imgDivHig = this.imgHig;//监听图片高,设置div高度},immediate:true}},

如果 父组件向子组件传值时 这时候值并没有发生改变我们却想在初始的时候就触发watch 就需要这个属性了 immediate  默认为false  为true时只初始化可以被监听

immediate属性:立即发生改变,使用场景:当父组件向子组件传值的时候,在初始的时候就赋值执行wa

代码这里就不放置了。就是deep:true一样的位置一样的写法它俩可以共存:immediate: true;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/218428.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

颠倒二进制位

题目链接 颠倒二进制位 题目描述 注意点 输入是一个长度为 32 的二进制字符串 解答思路 可以灵活运用位运算对二进制位进行颠倒&#xff0c;思路为&#xff1a;从后往前判断第i位是否为1&#xff0c;判断第i位是否为1可以将其二进制右移i位后与1进行&操作&#xff0c;…

天津数字孪生赋能工业智能制造,助力制造业企业数字化转型

天津数字孪生赋能工业智能制造&#xff0c;助力制造业企业数字化转型。为满足数字孪生对数据全面获取、深度挖掘、充分融合、实时交互、迭代优化等使用要求。在数据获取步骤同时获取物理实体数据与信息空间仿真数据以提高数据全面性。数字孪生数据获取包括物理实体相关数据、虚…

每日一练2023.12.13——6翻了【PTA】

题目链接&#xff1a;L1-058 6翻了 题目要求&#xff1a; “666”是一种网络用语&#xff0c;大概是表示某人很厉害、我们很佩服的意思。最近又衍生出另一个数字“9”&#xff0c;意思是“6翻了”&#xff0c;实在太厉害的意思。如果你以为这就是厉害的最高境界&#xff0c;那…

【编码器】位置管理器BoosterPack

前言 本篇博客主要学习和了解TI公司的BOOSTXL-POSMGR(即TI公司推出的一款位置管理器BoosterPack),主要用于多摩川绝对值编码器的位置读取和控制。它支持T-Format通信协议,可以与绝对值编码器进行通信,读取位置信息以及其他物理量,如转数、温度、参数等,并支持对编码器的…

程序员必须知晓的11个C++要点-供大家学习研究参考

要点汇集C书中或网站上无法找到的&#xff0c;如&#xff1a;指向成员的指针&#xff0c;这是许多资料中都不愿提到的地方&#xff0c;也是经常出错的地方。希望对大家学习研究有帮助。 要点1: <iostream.h> 还是 <iostream>? 要点2&#xff1a;用引用传递参数时…

html实现动漫视频网站模板源码

文章目录 1.视频设计来源1.1 主界面1.2 动漫、电视剧、电影视频界面1.3 播放视频界面1.4 娱乐前线新闻界面1.5 关于我们界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/detail…

IOS添加三方库冲突了

1 duplicate symbol for architecture arm64 改为 在Build Settings->Other link flags中添加-dead_strip&#xff0c;如果Other link flags中有-all_load与-force_load则删掉&#xff0c;只填-dead_strip

C++ 哈希表实现

目录 前言 一、什么是哈希表 二、直接定值法 三、开放定值法&#xff08;闭散列&#xff09; 1.开放定制法定义 2.开放定制法实现 2.1类的参数 2.2类的构造 2.3查找实现 2.4插入实现 2.5删除实现 2.6string做key 四、哈希桶&#xff08;开散列&#xff09; 1.开散…

让企业多一个选择:纷享销客华为云发布“CRM+云”联合解决方案

12月12日&#xff0c;纷享销客&华为云联合解决方案发布会在北京成功举办。本次发布会以“「CRM云」让企业多一个选择”为主题&#xff0c;与现场100位来自行业头部企业的CEO、CIO、业务负责人&#xff0c;共同探讨数字时代下&#xff0c;企业如何实现数字化技术与业务场景的…

SELinux介绍

本章主要介绍在RHEL8中如何使用 SELinux。 了解什么是 SELinux了解 SELinux 的上下文配置端口上下文了解SELinux的布尔值了解SELinux的模式 在 Windows系统中安装了一些安全软件后&#xff0c;当执行某个命令时&#xff0c;如果安全软件认为这个命令对系统是一种危害&#…

Android:FragmentHostCallback

我们在《从源码看FragmentManager如何工作》文章中提到过FragmentHostCallback这个类,从字面意思理解,他是对Fragment的持有者,并实现一些回调方法。他继承自FragmentContainer。 public abstract class FragmentHostCallback<E> extends FragmentContainer /*** 负…

vue3 echarts 各省地图展示

效果&#xff1a; 1.在src下新建utils文件夹添加各省地图的json文件&#xff08;下载各省地图的网址 DataV.GeoAtlas地理小工具系列&#xff09; 2.安装echarts npm install echarts 3.在项目文件中中引入json <template><div class"back"><div id…

搜维尔科技:用Diota增强现实提高生产力,是数字解决方案的先驱

Diota 是数字解决方案的先驱&#xff0c;结合了交互式 3D、增强现实、计算机视觉、人工智能和深度学习等尖端技术&#xff0c;以优化复杂制造业务的执行。Diota 解决方案扩展了数字模型以及工程和制造之间相关流程的使用&#xff0c;其中涉及制造产品的生产、组装、测试和维护。…

快速解决Edge浏览器常见问题:完整教程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 目录 文章目录 前言 一、Edge浏览器是什么&#xff1f; 二、常见的问题 1. DNS服务器出错 解决方案一&#xff1a;清除浏览器缓存和Cookie 2.网络问题 3.缓存和Cook…

微信小程序、uniapp仿扎克新闻(附源码)

介绍 本着试试 mpvue 的态度开发此程序&#xff0c;界面主要是模仿 ZAKER 新闻&#xff0c;数据全部是由 Mock 随机生成的&#xff0c;使用的是 Easy-Mock 服务。本程序只开发了的几个页面&#xff0c;尝试了自定义组件&#xff0c;路由跳转及参数传递等功能。再开发下去只是组…

冯诺依曼体系与操作系统的理解

目录 一.冯诺依曼体系结构 存储分级 为什么程序运行之前&#xff0c;必须加载到内存上&#xff1f; 二.操作系统 操作系统是什么&#xff1f; 为什么需要操作系统&#xff1f; 操作系统是如何管理软硬件资源&#xff1f; 一.冯诺依曼体系结构 我们常见的计算机&#xff…

https网站连接图标四种状态(安全、没有完全安全、过期和危险)

浏览 Web 时&#xff0c;地址栏中会显示一个图标&#xff0c;指示与要访问的网站的连接的安全性。 此图标可帮助您确定是否可以安全发送和接收网站的信息。 连接会告知发送到站点和从站点发送的信息&#xff08;如密码、地址或信用卡&#xff09;是否安全发送&#xff0c;且无法…

AI日报:人工智能与新材料的发现

文章目录 总览人工智能正在革命性地发现新的或更强的材料&#xff0c;这将改变制造业。更坚韧的合金问题研究解决方案 新材料人工智能存在的挑战方法探索 日本的研究人员正在使用人工智能制造更强的金属合金或发现新材料&#xff0c;并彻底改变制造过程 总览 日本的研究人员开…

什么是主动学习(Active Learning)?定义,原理,以及主要方法

数据是训练任何机器学习模型的关键。但是&#xff0c;对于研究人工智能的企业和团队而言&#xff0c;数据仍是实现成功的最大障碍之一。首先&#xff0c;您需要大量数据来创建高性能模型。更重要的是&#xff0c;您需要标注准确的数据。虽然许多团队一开始都是手动标注数据集&a…

Windows mysql5.7 执行查询/开启/测试binlog---简易记录

前言&#xff1a;基于虚拟机mysql版本为5.7&#xff0c;增量备份测试那就要用到binlog… 简述&#xff1a;二进制日志&#xff08;binnary log&#xff09;以事件形式记录了对MySQL数据库执行更改的所有操作。 binlog是记录所有数据库表结构变更&#xff08;例如CREATE、ALTER…