vue中set的简单使用

Vue.js 数据绑定与动态属性设置

最新推荐文章于 2025-03-05 20:40:11 发布

原创最新推荐文章于 2025-03-05 20:40:11 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue中set的简单使用

vue 专栏收录该内容

33 篇文章

订阅专栏

这是一个关于Vue.js的示例，展示了如何在 Vue 实例中使用 `Vue.set` 方法动态更新数据对象的属性，以及如何在模板中绑定数据到DOM元素。在这个例子中，创建了一个Vue实例并初始化了数据对象，然后在`ready`钩子函数中修改了`data`对象的`sex`属性，并通过变量`key`动态设置了`info`对象的内容。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>set</title>
    <script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
    <div id="app">
        姓名：{{ name }}<br>
        年龄：{{age}}<br>
        性别：{{sex}}<br>
        说明：{{info.content}}
    </div>
    <script>
        var data = {
            name: "Bill",
            age: '3',
            info: {
                content: 'my name is test'
            }
        }
        var key = 'content';
        var vm = new Vue({
            el: '#app',
            data: data,
            ready: function () {
                Vue.set(data,'sex', '男')
                this.$set('info.'+key, 'what is this?');
            }
        });
    </script>
</body>
</html>