当前位置: 首页 > news >正文

♥ vue中$set用法详细讲解

♥ vue中$set用法详细讲解

1、认识

在vue中,并不是任何时候数据都是双向绑定的。

官方文档介绍

在这里插入图片描述

使用场景

当数据没有被双向绑定的时候,我们就需要使用set了`

举个例子:
vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。

2、$set用法

数据没有被双向绑定我们可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名

- this.$set(原数组, 索引值, 需要赋的值)

length的问题还需要用splice方法

 - vm.items.splice(newLength)

set为解决双向绑定失效,所以什么时候双向绑定失效就用它

当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
由于 JavaScript 的限制,Vue不能检测对象属性的添加或删除

var vm= new Vue({data: {a: 1}
})
// `vm.a` 现在是响应式的vm.b = 2
// `vm.b` 不是响应式的

vm.a是响应式的, vm.b不是响应式的

简单来说

对象中原来有这个key=> 双向绑定
对象中原来没有这个key,新增的key=>不是双向绑定


vm.$set(con.userProfile, 'age', 27)

进一步使用

如果我们添加的属性很多条,可能就需要写一个循环来多次set
你也可能使用Object.assign,这里有一些需要注意的地方。
如果你想添加新的响应式属性,下面这样写是不行的。

Object.assign(vm.userProfile, {age: 27,favoriteColor: 'Vue Green'
})

这样才是正确的

vm.userProfile = Object.assign({}, vm.userProfile, {age: 27,favoriteColor: 'Vue Green'
})

3、原理

————————————————————————————

由于 Vue 会在初始化实例时进行双向数据绑定,使用Object.defineProperty()对属性遍历添加 getter/setter 方法,所以属性必须在 data 对象上存在时才能进行上述过程 ,这样才能让它是响应的。如果要给对象添加新的属性,此时新属性没有进行过上述过程,不是响应式的,所以会出想数据变化,页面不变的情况。此时需要用到$set。

向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property
(比如 this.myObject.newProperty = ‘hi’)

————————————————————————————

相关文章:

♥ vue中$set用法详细讲解

♥ vue中$set用法详细讲解 1、认识 在vue中,并不是任何时候数据都是双向绑定的。 官方文档介绍 使用场景 当数据没有被双向绑定的时候,我们就需要使用set了 举个例子: vue的data里边声明或者已经赋值过的对象或者数组(数组里…...

岩土工程仪器多通道振弦传感器信号转换器应用于桥梁安全监测

岩土工程仪器多通道振弦传感器信号转换器应用于桥梁安全监测 桥梁作为交通运输的重要节点,其安全性一直备受关注。不同于其他建筑物,桥梁所处的环境复杂多变,同时,其所需承受的负荷也相对较大,这就需要对桥梁的安全进…...

企业权限管理(六)-订单详情

订单详情查询 跳转到订单详情页面orders-show.jsp <button type"button" class"btn bg-olive btn-xs" onclick"location.href${pageContext.request.contextPath}/orders/findById.do?id${orders.id}">详情</button>OrdersControl…...

基于Tars高并发IM系统的设计与实现-实战篇5

基于Tars高并发IM系统的设计与实现-实战篇5 群聊服务 GroupChatServer 群聊服务既可以接受来自BrokerServer的用户请求&#xff0c;也需要接收来自其他服务的RPC请求;所以本服务提供两套RPC接口&#xff1a;通用RPC接口和专用RPC接口。 通用RPC接口 通用RPC接口主要处理如下…...

水溶性Cyanine3 N3叠氮化物Cy3 azide星戈瑞

欢迎来到星戈瑞荧光stargraydye! ICG-DBCO点击化学反应在生物标记物探测中应用。通过将ICG-DBCO与具有炔基的生物标记物结合&#xff0c;可以实现快速、选择性和稳定的共价连接&#xff0c;从而实现生物标记和探测。 **以下是ICG-DBCO点击化学反应在生物标记物探测中的一些应用…...

客户案例 | 永续发展,低代码助力“双碳”战略历史使命

关键发现 客户痛点&#xff1a;应对企业数字化转型&#xff0c;新技术能否提升绩效的不确定性&#xff0c;投资带来的风险性&#xff0c;以及企业组织架构的适应性等难点问题。作为业务驱动型企业&#xff0c;欠缺快速构建数字化产品方案的能力。 解决方案&#xff1a;利用西门…...

[保研/考研机试] KY187 二进制数 北京邮电大学复试上机题 C++实现

描述 大家都知道&#xff0c;数据在计算机里中存储是以二进制的形式存储的。 有一天&#xff0c;小明学了C语言之后&#xff0c;他想知道一个类型为unsigned int 类型的数字&#xff0c;存储在计算机中的二进制串是什么样子的。 你能帮帮小明吗&#xff1f;并且&#xff0c;小…...

SpringBoot 热部署

一、启动热部署 1.1 开启开发者工具 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional> </dependency>…...

BLE蓝牙协议栈分析

BLE——协议层次结构 一、BLE Controller Controller实现射频相关的模拟和数字部分&#xff0c;完成最基本的数据发送和接收&#xff0c;Controller对外接口是天线&#xff0c;对内接口是主机控制器接口HCI&#xff08;Hostcontroller interface&#xff09;&#xff1b; 控制…...

flutter开发实战-BackdropFilter高斯模糊子Widget控件

flutter开发实战-BackdropFilter高斯模糊子Widget。 最近开发过程中遇到需要将控件进行模糊&#xff0c;比如iOS的effect的模糊效果。那在flutter中就需要用到了BackdropFilter 一、BackdropFilter BackdropFilter属性定义 BackdropFilter({Key key, required ImageFilter …...

嵌入式面试刷题(day3)

文章目录 前言一、怎么判断两个float是否相同二、float数据可以移位吗三、数据接收和发送端大小端不一致怎么办四、怎么传输float类型数据1.使用联合进行传输2.使用字节流3.强制类型转换 总结 前言 本篇文章我们继续讲解嵌入式面试刷题&#xff0c;给大家继续分享嵌入式中的面…...

JVM源码剖析之Java命令行参数全解

最近&#xff0c;有一位网友询问关于Java命令行参数方面的问题&#xff0c;因为在Java中参数有很多种&#xff0c;有不少的读者一直没弄明白&#xff0c;所以特意写下此篇文章。 此篇文章分2大块&#xff0c;第一块是不同参数的解释&#xff0c;第2块就是JVM源码论证&#xff…...

抽象工厂模式-java实现

介绍 抽象工厂模式基于工厂方法模式引入了“产品族”的概念&#xff0c;即我们认为具体产品是固定的&#xff0c;具体产品存在等级之分&#xff0c;比如我们常说的手机&#xff0c;有“青春版”&#xff0c;“至尊版”&#xff0c;“至臻版”。一个产品有多个版本族。这时候&a…...

机器学习笔记 - 基于Python发现最佳计算机视觉模型的神经架构搜索技术NAS

一、简述 近年来,随着深度学习技术的兴起,计算机视觉领域取得了巨大进步。事实证明,卷积神经网络 (CNN) 在图像识别任务中异常强大,但针对特定问题设计最佳架构仍然是一项具有挑战性的任务。这就是神经架构搜索(NAS)发挥作用的地方。NAS 是一种尖端技术,可以自动发现高性…...

机器学习---自编码器

自编码器过程 输入一个图片&#xff0c;经过encoder变成一个向量&#xff0c;再通过decoder将这个向量反向生成输入的图片。 这里我们希望输入和输出越接近越好。这个过程我们称为重建。 特点&#xff1a;不需要任何的标注资料。 在2006年这个思想就被提出来了&#xff1a; …...

vuejs 设计与实现 - 渲染器的设计

渲染器与响应式系统的结合 本节&#xff0c;我们暂时将渲染器限定在 DOM 平台。既然渲染器用来渲染真实 DOM 元素&#xff0c;那么严格来说&#xff0c;下面的函数就是一个合格的渲染器: // 渲染器&#xff1a; function renderer(domString, container) {container.innerHTM…...

openCV 图像对象的创建和赋值

文章目录 一、赋值二、克隆三、拷贝四、初始化 一、赋值 赋值操作是将一个cv::Mat对象的数据复制到另一个对象中。赋值操作使用的是浅拷贝&#xff08;shallow copy&#xff09;&#xff0c;即两个对象共享相同的数据内存。这意味着对一个对象的修改会影响到另一个对象 cv::M…...

idea - 刷新 Git 分支数据 / 命令刷新 Git 分支数据

一、idea - 刷新 Git 分支数据 idea 找到 fetch 选项&#xff0c;重新获取分支数据 二、命令刷新 Git 分支数据 git fetch参考链接 1. 远程Gitlab新建的分支在IDEA里不显示...

线上电影购票选座H5小程序源码开发

搭建一个线上电影购票选座H5小程序源码需要一些基本的技术和步骤。以下是一个大致的搭建过程&#xff0c;可以参考&#xff1a; 1. 确定需求和功能&#xff1a;首先要明确你想要的电影购票选座H5小程序的需求和功能&#xff0c;例如用户登录注册、电影列表展示、选座购票、订单…...

QT正则校验

文章目录 前言一、Qt正则校验1.对输入框进行校验&#xff0c;不允许输入其他字符2.直接校验字符串 二、常用正则校验表达式 前言 项目中会经常遇到需要对字符串进行校验的情况&#xff0c;需要用到正则表达式&#xff08;Regular Expression&#xff0c;通常简写为RegExp、RE等…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...