Vue中数组更新，达到更新数组的几种方法

最近面试问道和平时工作中用到：改变了数组内的值，但是页面没有重新渲染，今天记录下解决方法

直接修改不生效，代码如下

<template><div><h2>数组展示：{{testArr}}</h2><button @click="changeArr">修改数组</button></div>
</template><script>export default {name: "fun",data: function() {return {testArr:["a","b","c","d"]}},methods: {changeArr(){// 这样直接修改数组是没用的，页面不会重新渲染this.testArr[1] = "w"console.log(this.testArr)}}}
</script>

第一种方法：Vue.set

changeArr(){// 这样直接修改数组是没用的，页面不会重新渲染this.testArr[1] = "w";//第一种方法： 用set来更新数据this.$set(this.testArr, 1, "Q")console.log(this.testArr)
}

该方法也能给对象新增属性，并更新试图：
给obj对象新增"newAttr"属性，并赋值为"hello world";
this.$set(this.obj, ‘newAttr’, ‘hello world’)

第二种方法：数组splice方法

changeArr(){// 第二种方法 splicethis.testArr.splice(1, 1, "R")console.log(this.testArr)
}

第三种方法：this.$forceUpdate()强制刷新

changeArr(){// 第三种方法： this.$forceUpdate()强制刷新this.testArr[1] = "G"this.$forceUpdate();console.log(this.testArr)
}

第四种方法：es6 "…"扩展运算符

changeArr(){// 第四种方法： es6 "..."扩展运算符this.testArr[1] = "Y"this.testArr = [...this.testArr]console.log(this.testArr)
}

Vue中数组更新，达到更新数组的几种方法相关推荐

Vue中打印网页的指定部分的几种方法
楔子这里是以下会用到的一些知识和说明可以在GitHub上下载打印插件,但是自己写更简单,所以我就自己写了本例为打印网页上的一个表格 window.print()打印的是整个网页的HTML内容,不 ...
vue中过滤器比较两个数组取相同值
在vue中需要比较两个数组取相同值一个大数组一个小数组,小数组是大数组的一部分取相同ID的不同name值有两种写法,两个for循环和map写法 const toName = (ids, arr) ...
js计算数组中每个元素出现的次数（2种方法）
js计算数组中每个元素出现的次数(2种方法) js动态生成唯一id Javascript生成全局唯一标识符(GUID,UUID)的方法
java整型转换为数组_基于java中byte数组与int类型的转换(两种方法)
java中byte数组与int类型的转换,在网络编程中这个算法是最基本的算法,我们都知道,在socket传输中,发送.者接收的数据都是 byte数组,但是int类型是4个byte组成的,如何把一个整形 ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
php判断数组的值是否为空,PHP判断数组是否为空的常用方法(五种方法)
本文介绍了PHP开发中遇到的数组问题,小编在这里给大家总结了5中方法关于php判断数组是否为空问题,需要的朋友参考下本文介绍了PHP开发中遇到的数组问题,这里介绍了判断PHP数组为空的5种方法,有需 ...
Java字节数组转换成十六进制字符串的几种方法
前言最近在项目中需要将字节数组转换成十六进制字符串,而Java内置的库中并没有相关工具可用,因此查了一下byte数组转hex字符串的相关方法,列出如下,需要可以直接拿来使用. 方法1:使用Strin ...
Python的pip怎样更新到最新版本：两种方法！
Python的pip怎样更新到最新版本:两种方法! 方法一: 在管理员模式的控制台里输入下面这行命令 python -m pip install --upgrade pip 方法二: Anaconda ...
php删除数组指定的元素,php删除数组中指定值的元素的几种方法
php删除数组中指定值的元素的几种方法发布时间:2020-11-11 10:44:07 来源:亿速云阅读:102 作者:小新这篇文章主要介绍php删除数组中指定值的元素的几种方法,文中介绍的非常 ...
#Python# 二维数组的定义、使用的几种方法
#Python# 二维数组的定义.使用的几种方法通常的困扰 1.先介绍最简单的一种方式 2.再介绍最常见的一种方式 3.最后介绍最暴力直观的一种方式通常的困扰之前对Python里面创建.使用二维 ...

Vue中数组更新，达到更新数组的几种方法

Vue中数组更新，达到更新数组的几种方法相关推荐

最新文章

热门文章