【Vue】零基础学习Vue: 第5课 Vue动态属性变化关系

最新推荐文章于 2022-08-31 09:21:08 发布

区块链（Web3）开发工程师

最新推荐文章于 2022-08-31 09:21:08 发布

阅读量254

点赞数

分类专栏：前端零基础学习Vue 文章标签： vue 前端零基础

本文链接：https://blog.csdn.net/qq_28505809/article/details/89878901

版权

前端同时被 2 个专栏收录

37 篇文章 5 订阅

订阅专栏

零基础学习Vue

27 篇文章 2 订阅

订阅专栏

给Vue内对象直接设置属性：

vm.obj.long = '180';

用$set设置属性：

vm.$set(vm.obj,'sex','男');

检测以上两者的区别：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{obj}}</p>
 
  </div>
 
  <script>
    let vm = new Vue({
      el:"#app",
      data:{
        obj:{
          name:"小明",
          age:18,
        }
      },
    })
    //一下两种方式给vue内对象添加属性的结果是不一样的
    vm.obj.long = '180';
    vm.$set(vm.obj,'sex','男');
  </script>
 
</body>
</html>

运行结果：