今天的码农女孩总结了哪些数组的方法是响应式的笔记

最新推荐文章于 2024-09-24 10:01:00 发布

丁丁丁dingdingding

最新推荐文章于 2024-09-24 10:01:00 发布

阅读量90

点赞数

分类专栏：笔记举例小练习文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_64444606/article/details/124682773

版权

笔记同时被 3 个专栏收录

91 篇文章 0 订阅

订阅专栏

小练习

47 篇文章 0 订阅

订阅专栏

举例

15 篇文章 0 订阅

订阅专栏

1.push() 2.pop() 3.shift() 4.unshift() 5.splice() 还可以进行增删改 6.sort() 7.reverse()

举例按钮8不是响应式

<body>
    <div id="app">
        <ul>
            <li v-for="item in letters" :key="item">{{item}}</li>
        </ul>
        <button @click="btn1">按钮1</button>
        <button @click="btn2">按钮2</button>
        <button @click="btn3">按钮3</button>
        <button @click="btn4">按钮4</button>
        <button @click="btn5">按钮5</button>
        <button @click="btn6">按钮6</button>
        <button @click="btn7">按钮7</button>
        <!-- 点击按钮8页面无影响，即使控制台改变了页面也不改变 -->
        <button @click="btn8">按钮8</button>
    </div>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                letters:[
                    'A','B','C','D','E'
                ]
            },
            methods: {
                btn1(){
                    //1.push()方法:向数组末尾添加元素,可以添加一个或多个，多个用逗号分割
                    this.letters.push("F")
                },
                btn2(){
                    //2.pop()方法:删除数组中的最后一个元素
                    this.letters.pop()
                },
                btn3(){
                    //3.shift()方法:删除数组中的第一个元素
                    this.letters.shift()
                },
                btn4(){
                    //4.unshift()方法:向数组最前面添加元素，可以添加一个或多个，多个用逗号分割
                    this.letters.unshift("a")
                },
                btn5(){
                    //5.splice()方法:可以删除元素还可以插入元素还可以替换元素，里面有三个参数
                    //删除元素：第一个参数删除元素的位置；第二个参数传入你要删除几个元素(如果没有传参数就删除指定位置后面所有的元素)；第三个参数无
                    this.letters.splice(1,1)
                    //替换元素：第一个参数要替换元素的位置；第二个参数传入你要替换几个元素；第三个参数替换的内容多个用逗号分开
                    this.letters.splice(1,3,'x','y','z')
                    //添加元素：第一个参数要插入元素的位置；第二个参数传入0；第三个参数插入的内容多个用逗号分开
                    this.letters.splice(1,0,'m','n')
                },
                btn6(){
                    //6.sort()方法：排序
                    this.letters.sort()
                },
                btn7(){
                    //7.reverse():颠倒数组中元素的顺序
                    this.letters.reverse()
                },
                // 按钮8不是响应式的
                btn8(){
                    //8.通过索引值修改数组中的元素
                    this.letters[0]='aa'
                },
            },
        })
    </script>
</body>