vue项目中，更改数组元素的值，视图没有实时更新

最新推荐文章于 2023-06-28 11:49:25 发布

罗倩楠_666

最新推荐文章于 2023-06-28 11:49:25 发布

阅读量163

点赞数

分类专栏： Vue

原文链接：https://www.cnblogs.com/tizi/p/14600267.html

版权

Vue 专栏收录该内容

12 篇文章 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>

    <style>
        .div {
            margin: 10px;
            display: inline-block;
            height: 20px;
            width: 20px;
            background-color: black;
            text-align: center;
            line-height: 20px;
            border-radius: 2px;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="changeArray">改变数组</button>
        <span class="div" v-for="(i,index) in this.myarray" :key="i">
        {{ i }}
      </span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    data: [1, 2, 3, 4],
                };
            },
            computed: {
                myarray() {
                    return this.data;
                },
            },
            methods: {
                changeArray() {
                    //  方法1 
                    this.$forceUpdate();
                    // this.data[1] = 6;
                    // 方法2
                    this.data.splice(1, 1, 6);
                    // 方法3
                    this.data.push();
                    // 方法4
                    this.$set(this.data, 1, 6);
                },
            },
        });
    </script>
</body>

</html>