向响应式对象中添加一个 property

最新推荐文章于 2022-11-02 14:03:07 发布

right前端

最新推荐文章于 2022-11-02 14:03:07 发布

阅读量343

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/eee66665/article/details/124754647

版权

这篇博客介绍了Vue.js中使用`Vue.set`或`vm.$set`方法向响应式对象添加新属性并确保其响应式的过程。通过示例代码展示了如何在Vue实例的数据对象上添加`sex`属性，并触发视图更新。注意该方法不适用于Vue实例或根数据对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.set( target, propertyName/index, value )
参数：

{Object | Array} target
{string | number} propertyName/index
{any} value
返回值：设置的值。

用法：

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

可以使用这两个方法来设置响应式属性
vm.$set
Vue.set

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <p v-for="(item,index) in students ">{{item}}</p>
        <button @click="adddata">点击加一条数据</button>
    </div>
</body>
<!-- 使用cdn方式引入vue--对于制作原型或学习，你可以这样使用最新版本： -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    //初始化一个vue实例
    Vue.config.productionTip = false
    var vm = new Vue({
        el: "#root",
        data: {
            students: {
                name: "aaa",
                age: 11
            }
        },
        created: function() {
            console.log(this);
        },
        methods: {
            adddata() {
                vm.$set(this.students, 'sex', 'femal');
                //Vue.set(this.students, 'sex', 'femal')
            }
        },
    })
</script>

</html>