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

程序员文章站 2022-04-24 09:48:29

...

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

运行结果：

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

控制台动态模拟更改属性值后：

我们再来看看vm内的属性情况：

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

【Vue】零基础学习Vue: 第7课 Vue指令v-if、v-else-if、v-else 的使用：

【Vue】零基础学习Vue: 第3课 vue的基本使用

零基础学习Vue: 第23课 Vue子组件slot插槽让子组件自定义样式：

零基础学习Vue: 第6课 Vue的v-on点击事件阻止冒泡等：

【Vue】零基础学习Vue: 第20课 Vue定义子组件template的常见3种写法：

零基础学习Vue: 第18课 Vue定义子组件template的3种写法

零基础学习Vue: 第9课 Vue的各种keyup键盘点击事件：

零基础学习Vue: 第20课 Vue子组件接收父主件传递的值：

零基础学习Vue:第14课 Vue的v-for遍历生成标签指令：

零基础学习Vue: 第33课 Vue组件间的跳转切换与缓存：