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

最新推荐文章于 2022-05-27 20:28:32 发布

铁锤妹妹头发多

最新推荐文章于 2022-05-27 20:28:32 发布

阅读量296

点赞数 1

分类专栏：前端文章标签： javascript vue 前端响应式 html

本文链接：https://blog.csdn.net/sss_benjamin/article/details/105932681

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

使用场景：使用Vue中的v-for展示数组中的元素。

响应式就是通过方法把数组中的元素改变了，页面上的也会更新

下面的代码经过实际测试和老师讲解，自行测试的时候取消某一个方法的语句的注释即可

响应式的

<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']
        },
        methods: {
            btnClick() {
                // 1.push方法：在数组最后面添加元素
                // this.letters.push('aaa')
                // this.letters.push('aaaa','bbbb','cccc')

                // 2.pop方法：删除数组中最后一个元素
                // this.letters.pop()

                // 3.shift方法：删除数组中第一个元素
                // this.letters.shift()

                // 4.unshift方法：在数组最前面添加元素
                // this.letters.unshift('aaa')
                // this.letters.unshift('aaaa','bbbb','cccc')

                // 5.splice方法：删除元素、插入元素、替换元素
                // this.letters.splice(1,0,'x','y','z')

                // 6.sort方法：排序

                // 7.reverse方法：反转
                // this.letters.reverse()
            }
        }
    })
</script>

</body>

splice方法作用详解：https://blog.csdn.net/SSS_Benjamin/article/details/105931543

不是响应式的

<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: {
            message: '你好啊世界！',
            letters: ['a','b','c','d']
        },
        methods: {
            btnClick() {
                // 通过索引值（下标）修改数组中的元素，不是响应式的
                // this.letters[0] = 'nnnnnn'
            }
        }
    })
</script>

</body>

可以用通过splice实现

this.letters.splice(0,1,'nnnnnn')

也可以通过Vue的set方法修改，也是响应式的，set(要修改的对象, 索引值, 修改后的值)

Vue.set(this.letters, 0, 'nnnnnn')

但是如果数组中的元素是对象，通过数组下标修改

修改某一个对象的属性值，这是响应式的

<body>

<div id="app">
    <ul v-for="obj in letters">
        <li v-for="(value, item) in obj">{{item}} - {{value}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: [
                {
                    id: 1,
                    name: '名字1'
                },
                {
                    id: 2,
                    name: '名字2'
                },
                {
                    id: 3,
                    name: '名字3'
                }
            ]
        },
        methods: {
            btnClick() {
                this.letters[1].name = '555'
            }
        }
    })
</script>

</body>

通过下标替换某一个对象元素，这不是响应式的

<body>

<div id="app">
    <ul v-for="obj in letters">
        <li v-for="(value, item) in obj">{{item}} - {{value}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: [
                {
                    id: 1,
                    name: '名字1'
                },
                {
                    id: 2,
                    name: '名字2'
                },
                {
                    id: 3,
                    name: '名字3'
                }
            ]
        },
        methods: {
            btnClick() {
                this.letters[1] = {
                    id: 5,
                    name: '555'
                } 
            }
        }
    })
</script>

</body>

铁锤妹妹头发多

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中哪些数组的方法在Vue中是响应式的

使用场景：使用Vue中的v-for展示数组中的元素。响应式就是通过方法把数组中的元素改变了，页面上的也会更新下面的代码经过实际测试和老师讲解，自行测试的时候取消某一个方法的语句的注释即可响应式的<body><div id="app"> <ul> <li v-for="item in letters">{{item}...
复制链接

扫一扫