4.Vue-------this.$set()的使用和详细过程-------vue知识积累

在Vue.js中,this.$set()是Vue实例this.someProperty = someValue来为Vue实例的属性赋值时,Vue会自动将该属性设置为响应式的,这样当属性的值变化时,相关的视图会自动更新

一. 对象的修改

对象:修改和新增


先定义数据对象:
obj: { name: "小明", age: 18, },        基本语法:
this.$set(需要改变的对象,"需要改变的对象属性""新值")

a.对象修改

this.$set(this.obj, "name", "小刘"); 控制台输出:obj: { name: "小刘", age: 18, },

b.对象新增

this.$set(this.obj, "hobby", "study");控制台输出:obj: { name: "小明", age: 18, hobby: "study"},  

c.对象新增未知属性(这里的item是传递的参数,不带引号,"reading"是参数值)

this.$set(this.obj, item, "reading");

二. 数组

先定义数组包对象:
arr: [                                           { name: "小王", age: 18 },{ name: "小张", age: 20 },],定义普通数组:       
twoArr: [11, 22, 33, ],                          基本语法:
this.$set(需要修改的数组,需要修改的数组下标,{ "要修改的数组对象,一个/多个" })

a.数组修改

 修改数组对象:
this.$set(this.arr, 1, { name: "小王", age: 19 });控制台输出:arr: [ { name: "小王", age: 18 },{ name: "小王", age: 19 }, ],
修改普通数组:
this.$set(this.twoArr, 0, 99);    控制台输出:twoArr: [99, 22, 33, ],   

b. 数组新增

(1)首先需要获取新增的数组长度

let reslg = this.arr.length;  

(2)然后添加在数组末尾

this.$set(this.arr, reslg,{ name: "小紫", age: 18 },);控制台输出:
arr: [ { name: "小王", age: 18 },{ name: "小张", age: 20 },{ name: "小紫", age: 18 },],

三. this.$delete

同理,执行删除操作时,对象或数组不更新时,可以使用this.$delete

基本语法:this.$delete(this.obj, "name")

this.$delete 也是一个实例方法,用于从响应式对象中删除属性,并确保该操作也是响应式的。使用this.$delete 可以解决Vue响应式系统的另一个限制,即无法检测到通过索引直接删除数组元素的变化。通过this.$delete 方法,可以显式地告诉Vue,某个属性已经被删除,从而触发视图的更新。

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

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

相关文章

怎么自己创建一个网站? 开发语言首选 java,使用CMS网站内容管理系统是不错的选择

怎么自己创建一个网站 推荐使用 Java CMS 网站内容管理系统,根据网站规划的功能模块,创建不同的页面风格; 文章目录 怎么自己创建一个网站一、规划网站1.1确定网站主题和目的1.2规划网站结构和内容 二、注册域名2.1选择域名注册商2.2 查找并…

tcpreplay/tcpdump-重放网络流量/捕获、过滤和分析数据包

tcpdump 是一个网络数据包分析工具,通过捕获并显示网络接口上传输的数据包,帮助用户分析网络流量。 原理:用户态通过 libpcap 库控制数据包捕获,内核态通过网卡驱动获取数据包。 核心功能包括:捕获、过滤和分析数据包…

[HCTF 2018]WarmUp-滑稽

启动场景打开链接&#xff0c;出现一下图片 F12查看代码出现一个注释&#xff0c;应该在这个文件中&#xff0c; 进入到该页面&#xff0c;出现一段代码 <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$whitelist ["sourc…

Web3的技术栈详解:解读区块链、智能合约与分布式存储

随着数字时代的不断发展&#xff0c;Web3作为下一代互联网的核心理念逐渐走进了大众视野。它承载着去中心化、用户主权以及更高效、更安全的网络环境的期望。Web3不再是由少数中心化机构主导的网络&#xff0c;而是通过一系列核心技术的支撑&#xff0c;给每个用户赋予了更多的…

碳金融衍生品:推动绿色金融与减排目标的创新工具

推动绿色金融与减排目标的创新工具 随着全球气候变化问题日益严峻&#xff0c;碳排放交易市场逐渐成为减少温室气体排放的重要手段。为了应对气候变化&#xff0c;越来越多的国家和地区推出了碳交易制度&#xff0c;并推动了碳金融衍生品的诞生。这些衍生品作为碳市场的重要组成…

【优选算法篇】寻找隐藏的宝藏:用二分查找打开算法世界的大门(上篇)

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…

通信综合—8.通信网络安全

一、信息系统安全概述 1.信息系统的构成和分类 信息系统是将用于收集、处理、存储和传播信息的部件组织在一起而成的相关联的整体&#xff0c;般是由计算机硬件、网络和通信设备、计算机软件、信息资源和信息用户组成。它是以处理信息流为目的的人机一体化系统。信息系统主要…

css实现圆周运动效果

在CSS中可以通过 keyframes 动画 和 transform 属性实现元素的圆周运动。以下是一个示例代码&#xff1a; 示例代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content…

docker run 设置启动命令

在使用 docker run 命令时&#xff0c;你可以通过指定启动命令来覆盖 Docker 镜像中的默认入口点或命令。具体来说&#xff0c;你可以通过以下两种方式来设置启动命令&#xff1a; 覆盖 CMD&#xff1a; 你可以通过在 docker run 命令的最后部分提供命令来覆盖镜像的默认 CMD 指…

QT QML Text, TextInput, TextFiled, TextArea缩略符号无法显示的问题?无法换行?

经常在使用Text或者其他文字控件时,文字缩略符号无法显示或者文字内容超出控件之外,就是不能换行和显示缩略符?其实,对于控件来说,换行和缩略符最重要的就是要明确控件的宽度,如果控件不给出宽度,文字就不会换行或者缩略显示。但是有一些情况下,我们排版时,不能够明确…

四、自然语言处理_02RNN基础知识笔记

1、RNN的定义 RNN&#xff08;Recurrent Neural Network&#xff0c;循环神经网络&#xff09;是一种专门用于处理序列数据的神经网络架构&#xff0c;它与传统的前馈神经网络&#xff08;Feedforward Neural Network&#xff09;不同&#xff0c;主要区别在于它能够处理输入数…

高性能MySQL-优化服务器设置

优化服务器设置 1、MySQL的配置是如何工作的1.1 MySQL配置文件1.2 语法、作用于和动态性1.3 设置变量的副作用 2、不可取的调整参数方法3、配置内存使用3.1 每个连接的内存需求3.2 为操作系统保留内存3.3 InnoDB缓冲池3.4 线程缓存3.4.1 MySQL线程池相关配置参数3.4.2 MySQL线程…

通过docker 搭建jenkins环境;

一、官网简介使用安装说明: How to use this image docker run -p 8080:8080 -p 50000:50000 jenkins This will store the workspace in /var/jenkins_home. All Jenkins data lives in there - including plugins and configuration. You will probably want to make that …

Ubuntu 22.04.5 + kubeadm:Kubernetes v1.28.2集群部署企业实战

文章目录 Ubuntu 22.04.5 kubeadm&#xff1a;Kubernetes v1.28.2集群部署企业实战一、环境准备1.1 机器规划1.2 环境配置1.2.1 设置主机名1.2.2 安装依赖工具1.2.3 配置时间同步1.2.4 关闭swap分区1.2.5 停止和禁用防火墙1.2.6 配置内核转发及网桥过滤1.2.7 安装配置ipset及i…

【ElasticSearch】倒排索引与ik分词器

ElasticSearch&#xff0c;简称ES(后文将直接使用这一简称)&#xff0c;是一款卓越的开源分布式搜索引擎。其独特之处在于其近乎实时的数据检索能力&#xff0c;为用户提供了迅速、高效的信息查询体验。 它能够解决全文检索&#xff0c;模糊查询、数据分析等问题。那么它的搜索…

uni-app写的微信小程序如何实现账号密码登录后获取token,并且每天的第一次登录后都会直接获取参数而不是耀重新登录(1)

uni-app写的微信小程序如何实现账号密码登录后获取token&#xff08;而token的有效器一般是30分钟&#xff0c;当页面在操作时token是不会过去&#xff0c;&#xff0c;离开页面第二天登录时token就是过期状态&#xff0c;因为记住了账号密码就不会操作再次登录&#xff0c;但是…

SpringCloud框架学习(第七部分:分布式事务Seata)

目录 十五、SpringCloud Alibaba Seata处理分布式事务 1.分布式事务背景 2.Seata简介 &#xff08;1&#xff09;介绍 &#xff08;2&#xff09;工作流程 &#xff08;3&#xff09;各事务模式 &#xff08;4&#xff09;下载安装 3.Seata案例实战-数据库和表准备 …

apache中的Worker 和 Prefork 之间的区别是什么?

文章目录 内存使用稳定性兼容性适用场景 Apache中的Worker和Prefork两种工作模式在内存使用、稳定性以及兼容性等方面存在区别 内存使用 Worker&#xff1a;由于使用线程&#xff0c;内存占用较少。Prefork&#xff1a;每个进程独立运行&#xff0c;内存消耗较大。 稳定性 W…

[C#] 对24位图像进行水平翻转(FlipX)的跨平台SIMD硬件加速向量算法(使用YShuffleX3Kernel)

文章目录 一、标量算法1.1 算法实现1.2 基准测试代码 二、向量算法2.1 算法思路2.1.1 难点说明2.1.2 解决办法&#xff1a;每次处理3个向量2.1.3 用YShuffleX3Kernel对3个向量内的24位像素进行翻转 2.2 算法实现2.3 基准测试代码2.4 使用 YShuffleX3Kernel_Args 来做进一步的优…

python打包深度学习虚拟环境

今天师兄让我把环境打包发给他&#xff0c;我才知道可以直接打包深度学习虚拟环境&#xff0c;这样另一个人就不用辛辛苦苦的去装环境了&#xff0c;我们都知道有些论文他需要的环境很难装上。比如装Apex&#xff0c;装 DCN&#xff0c;mmcv-full 我现在把3090机子上的ppft虚拟…