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

news/2024/7/5 3:12:37

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

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://lihuaxi.xjx100.cn/news/1889696.html

相关文章

剑指 Offer(第2版)面试题 28:对称的二叉树

剑指 Offer&#xff08;第2版&#xff09;面试题 28&#xff1a;对称的二叉树 剑指 Offer&#xff08;第2版&#xff09;面试题 28&#xff1a;对称的二叉树解法1&#xff1a;递归解法2&#xff1a;镜像二叉树 前序遍历 剑指 Offer&#xff08;第2版&#xff09;面试题 28&…

在Nexus上配置Docker镜像仓库

现在Docker镜像的工具已不少了&#xff0c;只是在Java老牌又持久的工具Nexus上配置本地Docker仓库镜像是一件即有情怀又充份利用资源的事情。 Nexus支持多种仓库类型&#xff0c;例如&#xff1a;maven、npm、docker等。 安装Nexus &#xff08;略&#xff09; Docker镜像配…

【网络安全技术】电子邮件安全PGP,SMIME

一、PGP&#xff08;Pretty Good Privacy&#xff09; PGP是一种邮件加密手段&#xff0c;他在发邮件一方加密&#xff0c;然后发给发送方邮件服务器&#xff0c;发送方邮件服务器再发送给接收方邮件服务器&#xff0c;然后接收方再从接收方邮件服务器pop出来&#xff0c;这整…

基于docker容器化部署微服务

前言 在笔者系列文章中微服务配置隔离已经完成服务之间的配置隔离&#xff0c;服务整体来说是已经通了。 为了方便后续测试已经环境统一&#xff0c;笔者本章节会对服务进行容器化部署。由于服务器性能问题&#xff0c;本次部署采用maven完成镜像构建&#xff0c;结合docker-c…

基于C/C++的rapidxml加载xml大文件 - 下部分

下载地址: RapidXml (sourceforge.net)https://rapidxml.sourceforge.net/ 将源码添加到自己的工程中 示例测试大文件耗时: 总共293w行数据&#xff0c;大概耗时不到1s。

【EXCEL】vlookup,index/match查找函数

区别&#xff1a; 1.Vlookup函数只能查找列数据&#xff0c;即纵向查找&#xff0c;而IndexMatch函数&#xff0c;既可以纵向查找&#xff0c;也可以横向查找&#xff1b; 2、Vlookup函数查找的依据(第一个参数)必须位于数据源的第一列&#xff0c;IndexMatch函数组合则无此限制…

持续集成交付CICD:Jenkins使用GitLab共享库实现自动上传前后端项目Nexus制品

目录 一、实验 1.GitLab本地导入前后端项目 2.Jenkins新建前后端项目流水线 3.Sonarqube录入质量阈与质量配置 4.修改GitLab共享库代码 5.Jenkins手动构建前后端项目流水线 6.Nexus查看制品上传情况 7.优化代码获取RELEASE分支 8.优化Jenkins流水线项目名称 一、实验 …

第22关 深入解析K8s中的RBAC角色访问控制策略

------> 课程视频同步分享在今日头条和B站 大家好&#xff0c;我是博哥爱运维&#xff0c;在k8s上我们如何控制访问权限呢&#xff0c;答案就是Role-based access control (RBAC) - 基于角色&#xff08;Role&#xff09;的访问控制&#xff0c;&#xff08;RBAC&#xff0…