Vue-更新时的一个问题

最新推荐文章于 2022-12-07 11:02:16 发布

大牛羊羊

最新推荐文章于 2022-12-07 11:02:16 发布

阅读量367

点赞数

分类专栏： Vue 文章标签： vscode

本文链接：https://blog.csdn.net/qq_64787372/article/details/124211215

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客探讨了在Vue中如何正确地更新引用数据类型，如对象和数组。通过一个示例，展示了直接赋值无法更改对象属性的问题，并提供了正确的更新方法。内容强调了在Vue中使用`this.persons[0].age = '30'`这种方式来更新对象属性而不是直接替换整个对象的重要性。

摘要由CSDN通过智能技术生成

注意：Vue中的方法只能更改基础数据类型（null、number、string、boolean、undefined)

不能更改引用数据类型(arr、object、function)

<body>

    <div id="root">

        <h1>人员列表</h1>

        <input type="text" placeholder="请输入名字" v-model="keyWord">

        <button @click="upDate">点击一下更新信息</button>//绑定点击事件

        <div v-for="p in persons" :key='p.id'>

            {{p.name}}-{{p.age}}-{{p.sex}}

        </div>

    </div>

    <script>

        new Vue({

            el: "#root",

            data: {

                persons: [

                    { id: '001', name: '马东梅', age: 21, sex: '女' },

                    { id: '002', name: '马千克', age: 28, sex: '男' },

                    { id: '003', name: '王太克', age: 17, sex: '男' },

                    { id: '004', name: '王国庆', age: 46, sex: '男' },

                ]

            },

            methods: {

                upDate() {

                    this.persons[0]= { id: '001', name: '马老师', age: 30, sex: '男' }

                }

            }//使用方法：若以这种对象的形式更改不了信息

        })

    </script>

</body>