vue2 中数组操作

lh15766518127

已于 2024-07-13 21:12:18 修改

阅读量115

点赞数

文章标签： vue.js javascript 前端

于 2024-07-11 21:49:01 首次发布

本文链接：https://blog.csdn.net/lh15766518127/article/details/140362950

版权

这其中只是个人的理解，有错的地方多担待，评论或私信告诉我各位的理解，我页能多学习学习

#注释的的内容初学者最好一一去尝试，更好的理解

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组操做</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>
        <button @click="ds">点击</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    list: ["A", "B", "C"]
                }
            },
            methods: {
                ds() {
                    // 在new Vue内用this拿取vue实例即 list 等属性或方法
                    // 在外部则使用自定义的vue对象来拿取vue实例即 list 等属性或方法， 这里是(app)


                    // app.list[0]="a" //无法修改成功，修改数据了，但页面没有渲染


                    //第一种修改方法(建议使用)
                    // this.$set(操作的数组，操作的下标，修改的数据)
                    // this.$set(this.list, 0, "a")


                    //第二种修改方法（不建议使用）
                    // this.list[0] = "a"
                    // this.$forceUpdate() //强制刷新


                    // 第三种方法
                    // this.list[0] = 'a'
                    // this.list = [...this.list] //深度复制，相当于修改整个list，页面重新渲染数组数据


                    // 使用数组操作方法，修改整个数组数据，使其页面重新渲染数组数据
                    // 1.后增加 push 和 前增加 unshift
                    // this.list.push("D")
                    // this.list.unshift("E")

                    // 2.删除splice(设置开始删除的索引，删除多少个数据)
                    // splice 当有三个参数时，第二个参数为0则为插入数据，否则为替换数据
                    // 插入数据 splice(设置开始插入的索引，0，插入的数据（可以是多个）)
                    // 替换数据 splice(开始删除的索引，删除多少数据，插入数据内容（可以是多个）)
                    this.list.splice(3, 1, 'c-')
                }
            },
        })
    </script>
</body>

</html>