首页 > 其他分享 >vue中this.$set()的使用

vue中this.$set()的使用

时间:2023-12-07 14:13:19浏览次数:28  
标签:arr vue name 18 age set 数组 使用

data中数据,都是响应式。也就是说,如果操作data中的数据,视图会实时更新;

但在实际开发中,遇到过一个坑:若data中数据类型较为复杂,方法methods中改变对象的属性,而页面并不会改变

原因是vue监听不到数据类型特别复杂的属性。

可以使用this.$set()来进行强制更新,进而解决问题

一。对象操作:

 三个参数:this.$set("需要改变的对象","需要改变的对象属性","值")

  定义数据对象:
  obj: { name: "小明", age: 18, },

  1.对象的修改

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

  2.对象的新增

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

  

二。数组操作:

  三个参数:this.$set("数组","下标","值")

  定义数组包对象:
  arr: [
    { name: "小王", age: 18 },
    { name: "小张", age: 20 },
  ],

  定义普通数组:
  twoArr: [11, 22, 33, ],
  1.数组的修改

修改数组对象:
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, ],

  2.数组新增

  (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.obj, "name")

 

标签:arr,vue,name,18,age,set,数组,使用
From: https://www.cnblogs.com/anna001/p/17881858.html

相关文章

  • 可视化学习:WebGL的基础使用
    引言继续复习可视化的学习。WebGL和其他Web端的图形系统存在很大的不同,是OpenGLES规范在浏览器的实现,它最大的不同就在于它更接近底层,可以由开发者直接操作GPU来实现绘图,性能很好,可以充分利用GPU并行计算的能力,并且WebGL还支持3D物体的渲染;WebGL最大的缺点应该就在于它的使用比......
  • 浅析MySQL代价模型:告别盲目使用EXPLAIN,提前预知索引优化策略
    背景在MySQL中,当我们为表创建了一个或多个索引后,通常需要在索引定义完成后,根据具体的数据情况执行EXPLAIN命令,才能观察到数据库实际使用哪个索引、是否使用索引。这使得我们在添加新索引之前,无法提前预知数据库是否能使用期望的索引。更为糟糕的是,有时甚至在添加新的索引后,数......
  • Vue + Element 实现按钮指定间隔时间点击
    1、业务需求需要加一个按钮,调用第三方API,按钮十分钟之内只能点击一次,刷新页面也只能点击一次2、思路加一个本地缓存的时间戳,通过时间戳计算指定时间内不能点击按钮3、实现1)vue页面<template><el-row:gutter="15"><el-col:span="4"><el-buttontype="danger"......
  • Java开发者必备:Maven简介及使用方法详解!
    今天我们来介绍一个在Java开发中非常重要的工具——Maven。如果你是一名Java开发者,那么你一定不会对Maven感到陌生。但是,对于一些新手来说,可能还不太了解Maven是什么,它有什么作用,以及如何使用它。接下来,就让我们一起来深入了解一下Maven吧!一、maven简介Maven是什么Maven是一个......
  • vue webpack 配置babel es6转化转化es5
    1、安装相关依赖npmi-D@babel/core@7.12.3npmi-D@babel/preset-env@7.12.1npmi-Dbabel-loader@8.0.6//语法中有asyncawait等npmi-D@babel/plugin-transform-runtime@7.23.4npmi-D@babel/runtime@7.23.52、babel.config.jsmodule.exports={pres......
  • 神经网络优化篇:详解训练,验证,测试集(Train / Dev / Test sets)
    训练,验证,测试集在配置训练、验证和测试数据集的过程中做出正确决策会在很大程度上帮助大家创建高效的神经网络。训练神经网络时,需要做出很多决策,例如:神经网络分多少层每层含有多少个隐藏单元学习速率是多少各层采用哪些激活函数创建新应用的过程中,不可能从一开始......
  • 使用函数计算,数禾如何实现高效的数据处理?
    作者|邱鑫鑫,王彬,牟柏旭公司背景和业务数禾科技以大数据和技术为驱动,为金融机构提供高效的智能零售金融解决方案,服务银行、信托、消费金融公司、保险、小贷公司等持牌金融机构,业务涵盖消费信贷、小微企业信贷、场景分期等多个领域,提供营销获客、风险防控、运营管理等服务。数禾科......
  • uni-app 基础架构搭建 ts+vue3 命令行
    1. 安装全局degitnpminstall-gdegit2.创建工程my-vue3-ts-project#创建以javascript开发的工程npxdegitdcloudio/uni-preset-vue#vitemy-vue3-ts-project#创建以ts开发的工程npxdegitdcloudio/uni-preset-vue#vite-tsmy-vue3-ts-project3进入目录cdmy-v......
  • vue + 无限滚动不同高度
     <divclass="exbox"style="height:461px;overflow:auto"@mouseenter="handleMouseEnter()"@mouseleave="handleMouseLeave()">       <divclass="mainrollul"ref="textList"id="......
  • Amazon WorkSpaces 现在提供使用 WorkSpaces 流协议(WSP)的 Web Access
    企业一直需要找到相应的方案,以快速让用户从任何地点和任何计算机进行工作,同时保证安全性和生产力。为了使用WorkSpaces流协议(WSP)简化AmazonWorkSpaces的部署,同时无需安装原生的客户端应用程序,用户现在可以在Windows、macOS或Linux计算机上通过受支持的Web浏览器访问A......