Vue 数组方法是否有响应式的效果

最新推荐文章于 2023-07-25 16:17:04 发布

#Hideonbush

最新推荐文章于 2023-07-25 16:17:04 发布

阅读量623

点赞数

分类专栏： vue笔记

本文链接：https://blog.csdn.net/weixin_41359273/article/details/109387170

版权

vue笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.数组的方法包括增删改查，那么这些对数组的操作，界面上的数据到底是否还是有响应式的效果呢？
数组的push,pop，unshift，shift,sort,reverse,splice都是具有响应式的效果，但我们通过this.fruits[2]='c’这种方式修改，就没有达到响应式效果，如果是要修改数组元素的话，可以使用splice或者Vue.set来实现
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    {{fruits}}<br>
    <button @click="btnClick">操作按钮</button>
</div>
<script src="./vue.js"></script>
<script>
    const content = new Vue({
        el: '#content',
        data: {
            fruits: ['apple','banana','peach','grape']
        },
        methods: {
            btnClick() {
                //1.往数组添加元素
                this.fruits.push('a','b')
                //2.移除元素
                this.fruits.pop()
                //3.往数组前面追加元素
                this.fruits.unshift('c','d')
                //4.从数组开头移除元素
                this.fruits.shift()
                //5.排序
                this.fruits.sort()
                //6.反转数组
                this.fruits.reverse()
                //7.splice方法
                //1）作为删除使用
                // 传入一个参数，从该索引位置开始往后的元素都删除
                this.fruits.splice(2)
                //传入两个参数，从该第一个参数索引位置开始，删除指定个数元素
                this.fruits.splice(2,1)
                //2)作为替换使用
                //传入三个参数，从第二个索引位置开始的第一个元素替换为a
                this.fruits.splice(2,1,'a')
                //传入四个参数，从第二个索引位置开始的两个元素依次替换成b和c
                this.fruits.splice(2,2,'b','c')
                //3)作为添加元素使用
                //传入三个参数，从第二个索引位置开始，添加元素
                this.fruits.splice(2,0,'e')
                //通过这一种方式，修改元素，页面的数据并不会做到响应式
                this.fruits[1] = 'egg'
                //以下两种方式，在修改数组的内容时，才会做到响应式
                this.fruits.splice(1,1,'egg')
                Vue.set(this.fruits,1,'egg')
            }
        }
    })
</script>
</body>
</html>

#Hideonbush

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 数组方法是否有响应式的效果

1.数组的方法包括增删改查，那么这些对数组的操作，界面上的数据到底是否还是有响应式的效果呢？数组的push,pop，unshift，shift,sort,reverse,splice都是具有响应式的效果，但我们通过this.fruits[2]='c’这种方式修改，就没有达到响应式效果，如果是要修改数组元素的话，可以使用splice或者Vue.set来实现例子<!DOCTYPE html><html lang="en"><head> <meta ch
复制链接

扫一扫