iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中使用this.$set()如何新增数据,更新视图
  • 872
分享到

Vue中使用this.$set()如何新增数据,更新视图

2024-04-02 19:04:59 872人浏览 泡泡鱼
摘要

目录使用this.$set()新增数据,更新视图描述简单的讲就是说说Vue.set() (this.$set)用法使用this.$set()新增数据,更新视图 描述 如果在实例创建之

使用this.$set()新增数据,更新视图

描述

如果在实例创建之后添加新的属性到实例上,它不会触发视图更新

简单的讲就是

在页面渲染完成之后,对data里的某个数组或对象进行新增删除属性操作是监听不到的,视图不会更新

<div id='app'>
    <el-button @click="setinfo">新增属性</el-button>
    <div v-for="item in info">{{item}}</div>
  </div>
data: {
      info: {
        id: 1,
        name: '老王',
      }
    },
setinfo() {
        let that = this
        that.info.age = 11
        console.log(that.info)
      },

可以看到点击按钮之后,打印出的数据中有age,但是视图没更新

正确的应该是使用this.$set

setinfo() {
        let that = this
        that.$set(that.info,'age','11')
        console.log(that.info)
      }

this.$set(target, key, value)

  • target: 要更改的数据源(可以是一个对象或者数组)
  • key: 要更改的具体数据(索引)
  • value: 新增的值

删除属性可以使用this.$delete(target,key)

this.$delete(that.info,"name")

说说vue.set() (this.$set)用法

这段时间工作上经常操作数组数据,并且要求实时更新视图数据,这个时候首先想到的是 vue.set() 方法(注:当发现model上的数据发生改变,而页面上的视图数据没有改变,推荐使用该方法),该方法的使用首先要在页面引入vue,应该这样写:import Vue from 'vue',这样才能在组件全局获取到vue这个实例对象。

如果你觉得引入麻烦,推荐使用vue.set的别名this.$set。

那么现在上代码:

html:

<ul class="province_area_style province_area">
            <li v-for="(item, index) in provinceArrs" :key='index' :id='index'><input type="checkbox" :id= "'checkbox' + index" :class="{checkOn: item.checkOn, checkOff: item.checkOff}" @click="clickProvince(index, item)"><label :for="'checkbox' + index">{{item.name}}</label><i @click="clickProvinceIcon(index, item)"></i></li>
          </ul>

js:

clickProvince(pindex, pitem) {
      pitem.checkOn = !pitem.checkOn
      pitem.checkOff = !pitem.checkOff
      this.$set(this.provinceArrs, pindex, {p_name: pitem.p_name, p: pitem.p, name: pitem.name, c: pitem.c, checkOn: pitem.checkOn, checkOff: pitem.checkOff})
}

从上代码可知,点击事件clickProvince( ),可以改变数组 this.provinceArrs 中指定下标 pindex 的值并实时更新页面的视图,这样就极大的方便了操作数组中的某项值,使用示列:this.$set(arr,  index,  val)。

当然,this.$set除了用于操作数组外还可以操作对象,使用示例:this.$set( obj, key, val). 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue中使用this.$set()如何新增数据,更新视图

本文链接: https://www.lsjlt.com/news/152903.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中使用this.$set()如何新增数据,更新视图
    目录使用this.$set()新增数据,更新视图描述简单的讲就是说说vue.set() (this.$set)用法使用this.$set()新增数据,更新视图 描述 如果在实例创建之...
    99+
    2022-11-13
  • Vue中使用this.$set()怎么新增数据并更新视图
    本文小编为大家详细介绍“Vue中使用this.$set()怎么新增数据并更新视图”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue中使用this.$set()怎么新增数据并更新视图”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一...
    99+
    2023-07-02
  • 解决vue中数据更新视图不更新问题this.$set()方法
    目录vue数据更新视图不更新解决问题vue数据不更新的原因(数据更改了,但是视图没有更新)解决办法具体流程如下数组更新检测注意事项对象更改检测注意事项vue数据更新视图不更新 1.d...
    99+
    2022-11-13
  • vue中数据更新视图不更新怎么解决
    本文小编为大家详细介绍“vue中数据更新视图不更新怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue中数据更新视图不更新怎么解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。vue数据更新视图不更新d...
    99+
    2023-07-02
  • oracle视图数据如何更新
    在Oracle中,视图是基于表的查询结果的虚拟表。视图本身不存储数据,而是从基表中检索数据。因此,无法直接对视图进行数据更新。但是,...
    99+
    2023-08-08
    oracle
  • vue增加数据不更新如何解决
    本篇内容主要讲解“vue增加数据不更新如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue增加数据不更新如何解决”吧!vue增加数据不更新的解决办法:1、使用“this.$set(tar...
    99+
    2023-07-04
  • Vue.set()如何实现动态新增与修改数据以及触发视图更新
    小编给大家分享一下Vue.set()如何实现动态新增与修改数据以及触发视图更新,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!参数...
    99+
    2022-10-19
  • vue中修改了数据但视图无法更新怎么办
    这篇文章主要为大家展示了“vue中修改了数据但视图无法更新怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中修改了数据但视图无法更新怎么办”这篇文章吧...
    99+
    2022-10-19
  • Android中如何使用异步线程更新UI视图
    这篇文章主要为大家展示了“Android中如何使用异步线程更新UI视图”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Android中如何使用异步线程更新UI视图”这篇文章吧。在Android中子...
    99+
    2023-05-30
    android
  • 如何使用@CachePut更新数据库和更新缓存
    小编给大家分享一下如何使用@CachePut更新数据库和更新缓存,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!关于更新缓存 ,要注意两点1、@Cacheable的...
    99+
    2023-06-22
  • 如何解决Vue中数组和对象更改后视图不刷新的问题
    这篇文章主要为大家展示了“如何解决Vue中数组和对象更改后视图不刷新的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决Vue中数组和对象更改后视图不刷...
    99+
    2022-10-19
  • 如何在golang中使用WebSocket进行实时数据更新
    如何在Golang中使用WebSocket进行实时数据更新概述:WebSocket是一种为了在Web浏览器和服务器之间进行全双工通信而设计的通信技术。在Golang中,我们可以使用标准库中的net/http和github.com/goril...
    99+
    2023-12-18
    实时数据更新 Golang WebSocket实现 WebSocket数据更新
  • 如何解决IE11 vue+webpack项目中数据更新后页面没有刷新的问题
    这篇文章主要介绍如何解决IE11 vue+webpack项目中数据更新后页面没有刷新的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!vue +webpack 项目中数据更新后页面...
    99+
    2022-10-19
  • 如何使用SQL语句在MySQL中更新和删除数据?
    如何使用SQL语句在MySQL中更新和删除数据?在MySQL数据库中,更新和删除数据是非常常见的操作。通过使用SQL语句,我们可以方便地更新和删除表中的数据。本文将介绍如何使用SQL语句在MySQL中更新和删除数据,并提供具体的代码示例。更...
    99+
    2023-12-17
    MySQL SQL语句 更新删除数据
  • 如何使用ECharts和php接口实现统计图的数据驱动更新
    如何使用 ECharts 和 PHP 接口实现统计图的数据驱动更新导言:在数据可视化的开发中,ECharts 是一款非常强大的前端图表库,而 PHP 则是一种广泛应用于后端开发的编程语言。结合这两者,我们可以轻松实现统计图的数据驱动更新。本...
    99+
    2023-12-18
    echarts PHP接口 统计图 数据驱动更新
  • 如何通过Dataphin构建数据中台新增100万用户?
    欢迎来到数据中台小讲堂!这一期我们来看看,作为阿里巴巴数据中台(OneData - OneModel、OneID、OneService)方法论的产品载体,Dataphin如何帮助传统零售企业实现数字化转型,并在短时间内新增100万用户?传统...
    99+
    2023-06-03
  • 如何使用ECharts和php接口实现统计图的数据缓存和更新
    如何使用ECharts和php接口实现统计图的数据缓存和更新在Web应用程序中,经常需要使用统计图来展示数据分析结果。ECharts是一个流行的开源JavaScript图表库,可以帮助我们创建各种类型的交互式统计图。然而,当数据量非常大或者...
    99+
    2023-12-17
    PHP echarts 数据缓存
  • 如何用PHP从MySQL数据库中添加、更新和删除数据
    本篇内容主要讲解“如何用PHP从MySQL数据库中添加、更新和删除数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何用PHP从MySQL数据库中添加、更新和删除数据”吧!一、PHP和MySQ...
    99+
    2023-07-05
  • 微信小程序中js文件如何改变参数并在视图上及时更新
    小编给大家分享一下微信小程序中js文件如何改变参数并在视图上及时更新,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、简单参数XX.wxml<view>   ...
    99+
    2022-10-19
  • 如何使用Memcache优化你的PHP应用中的数据更新操作?
    如何使用Memcache优化你的PHP应用中的数据更新操作?Memcache是一款内存缓存系统,常用于优化高并发的Web应用。在PHP应用中,数据的更新操作通常是相对较慢的,而使用Memcache可以将频繁的数据库查询操作转移到内存中,从而...
    99+
    2023-11-07
    Memcache (使用内存缓存) 优化 (提高性能) 数据更新操作 (更新数据)
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作