数组中哪些方法是响应式的

最新推荐文章于 2024-07-19 12:49:14 发布

田小江爱分享

最新推荐文章于 2024-07-19 12:49:14 发布

阅读量797

点赞数

分类专栏： Vue学习笔记文章标签：前端框架

本文链接：https://blog.csdn.net/third_/article/details/120140242

版权

Vue学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、响应式的

1、push方法--往数组中加入元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="pushClick">push是响应式的</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C', 'D', 'E']
        },
        methods: {
            pushClick() {
                //1、push方法--是响应式的，也可以一次加多个元素
                this.letters.push('aaa')
            }
        }
    })
</script>
</body>

可以看到每次点击按钮，列表会增加一个aaa。执行结果如下：

2、pop方法--删除数组中的最后一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="popClick">pop是响应式的</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C', 'D', 'E']
        },
        methods: {
            popClick() {
                //1、pop方法--删除数组的最后一个元素，是响应式的
                this.letters.pop()
            }
        }
    })
</script>
</body>

可以看到每次点击按钮，列表会把最后一个元素删除，执行结果如下：

3、shift方法--删除数组中的第一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="shiftClick">shift是响应式的</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C', 'D', 'E']
        },
        methods: {
            shiftClick() {
                //1、shift方法--删除数组中的第一个元素，是响应式的
                this.letters.shift()
            }
        }
    })
</script>
</body>

可以看到每次点击按钮，列表会把第一个元素删除，执行结果如下：

4、unshift--在数组最前面添加元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="unshiftClick">unshift是响应式的</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C', 'D', 'E']
        },
        methods: {
            unshiftClick() {
                //1、unshift方法--在数组最前面添加元素，可以添加多个，是响应式的
                this.letters.unshift('aaa', 'bbb', 'ccc')
            }
        }
    })
</script>
</body>

可以看到每次点击按钮，列表会在头部增加三个元素，执行结果如下：

5、splice方法--删除元素/增加元素/替换元素

删除元素：第一个参数是指从第几位开始操作，第二个参数传入你要删除的几个元素（如果没有传，就删除后面所有的元素）

替换元素：第一个参数是指从第几位开始操作，第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素。

增加元素：第一个参数是指从第几位开始操作，第二个参数，传入0，并且后面跟上要插入的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="spliceDelete">splice是响应式的--删除元素</button>
    <button @click="spliceAdd">splice是响应式的--增加元素</button>
    <button @click="spliceReplace">splice是响应式的--替换元素</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C', 'D', 'E']
        },
        methods: {
            spliceDelete() {
                //1、splice方法--删除元素的方式，第一个元素表示从第几位开始操作，第二个元素表示删除的个数
                this.letters.splice(0, 2)
            },
            spliceAdd() {
                //2、splice方法--增加元素的方式，第一个元素表示从第几位开始操作，第二个参数，传入0，并且后面跟上要插入的元素。
                this.letters.splice(1, 0, 'aaa', 'bbb')
            },
            spliceReplace() {
                //2、splice方法--替换元素的方式，第一个参数是指从第几位开始操作，第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素。
                this.letters.splice(1, 2, 'M', 'N')
            }
        }
    })
</script>
</body>

可以看到点击删除元素按钮后，A和B元素被删除

点击增加元素按钮后，在C后面的位置增加了aaa和bbb元素。

点击替换元素按钮后，将aaa和bbb元素分别替换为M和N。

6、sort方法--排序数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="sortClick">sort是响应式的</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['E', 'B', 'C', 'A', 'D']
        },
        methods: {
            sortClick() {
                //1、sort方法--将数组进行排序，是响应式的
                this.letters.sort()
            }
        }
    })
</script>
</body>

可以看到点击按钮后，数组被按顺序排序了，执行结果如下：

7、reverse方法--反转数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="reverseClick">reverse是响应式的</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C', 'D', 'E']
        },
        methods: {
            reverseClick() {
                //1、reverse方法--将数组进行反转，是响应式的
                this.letters.reverse()
            }
        }
    })
</script>
</body>

可以看到点击按钮后，数组被反转了，执行结果如下：

二、非响应式的

通过索引值修改数组中的元素的方式：this.letters[0] = 'bbbb' 不是响应式的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">通过索引值修改数组中的元素</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C', 'D', 'E']
        },
        methods: {
            btnClick() {
                //2、通过索引值修改数组中的元素
                this.letters[0] = 'bbbb'
            }
        }
    })
</script>
</body>

执行结果如下，可以看出来数组中的值已经被改变成bbbb了，但是浏览器页面的第一个A没有被改变：

可以使用vue的set方法，set('要修改的对象','索引值',''修改后的值 )

Vue.set (this.letter,0,'bbbbb')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C', 'D', 'E']
        },
        methods: {
            btnClick() {
                new Vue.set(this.letters, 0 ,'bbbbb')
            }
        }
    })
</script>
</body>