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

最新推荐文章于 2024-07-06 16:47:02 发布

FGGIT

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量56

点赞数

分类专栏： vue学习笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_47888212/article/details/128742497

版权

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

54 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in messages" :key="item">{{item}}</li>
        </ul>
        <button @click="btnClick">按钮</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                messages: ["a","b","c","d"]
            },
            methods: {
              btnClick(){
                  //1.push方法：添加元素
                  //this.messages.push('aaa')
                  //this.messages.push('aaa','bbb','ccc')

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

                  //3.shift()：删除数组中的的一个元素
                  //this.messages.shift()

                  //4.unshift()：在数组最前面添加元素
                  //this.messages.unshift()
                  //this.messages.unshift('aaa','bbb','ccc')

                  //5.splice作用：删除元素/插入元素/替换元素
                  
                  //删除元素：第二个参数传入你要删除几个元素（如果没有传，就从开始位置删除全部元素）
                  //this.messages.splice(1)
                  //this.messages.splice(1,3)
                  
                  //替换元素：第二个参数表示我们要替换几个元素，后面是用于替换的参数值
                  //this.messages.splice(1,3,'m','n','l')
                  
                  //插入元素：第二个元素传入0，并且后面跟上要插入的元素
                  //this.messages.splice(1,0,'x','y','z')
              
                  //5.sort():排序
                  //this.messages.sort()

                  //6.reverse()：翻转
                  this.messages.reverse()

                  //注意：通过索引值修改数组中的元素不是响应式的
                  //this.messages[0] = 'bbbbb'
                  //解决方案
                  //this.messages.splice(0,1,'bbbbb')

                  //set(要修改的对象，索引值，修改后的值)
                  //Vue.set(this.messages, 0, 'bbbbb')
              }  
            },
        })
    </script>
</body>
</html>