Vue中列表和对象渲染中的坑（动态修改实时显示）

最新推荐文章于 2023-06-22 10:30:30 发布

xunfengZ

最新推荐文章于 2023-06-22 10:30:30 发布

阅读量590

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/xunfengZ/article/details/109606475

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

渲染列表时：

需求是点击按钮后修改值为1000，如图所示：

在这里插入图片描述
先看以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .actived {
            color: red;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <div 
            v-for="(item,index)  in arr">
                {{item}}
                <button v-on:click="change(index)">修改</button>
            </div>
            
        </div>
       
    </div>


    <script>
        var app = new Vue({
            el:"#app",
            data:{
                flag:false,
                arr:[
                    100,
                    200,
                    300 
                ]
            },
            methods:{
                change(index){
                    console.log(index)        
                    this.arr.splice(index,1,1000)

                }
            }
        })
    </script>
</body>
</html>

当我们使用下标来修改数组中的值时，vue是不会动态修改值的：
在这里插入图片描述

当vue遇到push pop shift unshift splice sort reverse 的时候数组都会改变。

渲染对象时：

需求如下所示：
在这里插入图片描述
先看正确代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
      .actived {
        color: red;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-for="item in arr" :key="item.id">
        <h1>{{item}}</h1>
      </div>
      <button @click="add">add</button>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          arr: [
            {
              id: 1,
              fruit: "苹果",
            },
            {
              id: 2,
              fruit: "香蕉",
            },
            {
              id: 3,
              fruit: "橙子",
            },
          ],
        },
        methods: {
          add() {
          //这里有两种方法，第一个是使用修改数组时使用的方法splice
            // app.arr.splice(1,1,{ "id": 2, "fruit": "香蕉" ,'color':'黄色'})
            //第二个是官方提供的$set()方法
            app.$set(this.arr[1],'color','red')
          },
        },
      });
      console.log(app);
    </script>
  </body>
</html>

其中的第二个$set方法，由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 gett/sertter 方法，所以属性必须在 data 对象上存在时才能进行上述过程，这样才能让它是响应的。如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出想数据变化，页面不变的情况。
如果用下面这个方法修改：
在这里插入图片描述
发现也是可行的。
但是！！！！
当我们用这种方法去添加新属性时，就发现实现不了了：

千万不要掉进惯性思维的陷阱！

xunfengZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中列表和对象渲染中的坑（动态修改实时显示）

渲染列表时：需求是点击按钮后修改值为1000，如图所示：先看以下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &
复制链接

扫一扫

专栏目录