vue中set的简单使用

最新推荐文章于 2024-07-04 09:46:22 发布

加鸡腿

最新推荐文章于 2024-07-04 09:46:22 发布

阅读量228

点赞数

分类专栏： vue 文章标签： vue中set的简单使用

本文链接：https://blog.csdn.net/qq_43437571/article/details/108885555

版权

vue 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

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

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

代码展示：

<!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>