关于vue框架中使用数组相关方法时，数据同步到页面的小结

最新推荐文章于 2022-09-14 15:29:33 发布

吉他征

最新推荐文章于 2022-09-14 15:29:33 发布

阅读量294

点赞数

分类专栏：前端文章标签： vue js javascript

本文链接：https://blog.csdn.net/weixin_40056279/article/details/110220376

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue框架中的数组中哪些方法可以实时同步页面数据？

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-哪些数组的方法是响应式的.html</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in movies" :key="item">{{item}}</li>
        </ul>
        <button @click="btnClick">click</button>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                movies: ['5-芳华', '1-海王', '2-海贼王', '3-加勒比海盗', '4-海尔兄弟']
            },
            methods: {
                btnClick() {
                    //1 push方法会同步（在数组最后插入元素）
                    // this.movies.push("神奇女侠");
                    // this.movies.push("神奇女侠", "哪吒");

                    //2 pop()会同步（删除数组的最后一个元素）
                    // this.movies.pop();

                    //3 shift()会同步（删除数组的第一个元素）
                    // this.movies.shift();

                    //4 unshift()会同步（在数组最前面插入元素）
                    // this.movies.unshift("0-你好之华");
                    // this.movies.unshift("-1-速度与激情", "0-你好之华");

                    //5 splice()会同步（删除，替换，插入元素）
                    // 删除元素:第一个参数传入从哪个索引开始， 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
                    // this.movies.splice(1,1);//(从索引1开始往后删除1个元素，包含索引1处的元素)
                    // this.movies.splice(1);//（从索引1开始，删除后面的所有元素，包含索引1处的元素）
                    // 替换元素: 第一个参数传入从哪个索引开始，第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
                    // this.movies.splice(1,2,"金刚狼1","金刚狼2");
                    // this.movies.splice(1,2,"金刚狼1");//不会报错，但是只是替换了1个元素
                    // 插入元素: 第一个参数传入从哪个索引开始，第二个参数, 传入0, 并且后面跟上要插入的元素
                    // this.movies.splice(1, 0, "金刚狼1","金刚狼2");

                    //6 sort()会同步（数组排序）
                    // this.movies.sort();
                    // console.log(this.movies);

                    //7 reverse()会同步（数组翻转）
                    // this.movies.reverse();

                    //8 通过索引修改数组元素，不会同步到页面上
                    // this.movies[0] = '0-白蛇';
                    // console.log(this.movies);

                    //9 怎么样通过索引修改数组元素，修改后的值会同步到页面上呢？
                    Vue.set(this.movies, 0, '0-白蛇');//会同步
                    console.log(this.movies);
                }
            }
        })
    </script>
</body>

</html>