[Vue.js] 为已有对象添加新的响应式属性


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue - 我的学习</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
<div id="app">
    <p>姓名：{{ userProfile.name }}</p>
    <p>姓名：{{ userProfile.age }}</p>
    <p>姓名：{{ userProfile.favoriteColor }}</p>
</div>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        userProfile: {
            name: "Kelly"
        }
    }
})
vm.userProfile = Object.assign({}, vm.userProfile, {
    age: "18",
    favoriteColor: "red"
})
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容