您的位置:首页 > Web前端 > Vue.js

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

2019-05-06 11:30 603 查看

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

[code]vm.obj.long = '180';

用$set设置属性:

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

检测以上两者的区别:

[code]
<!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>

运行结果:

 

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

 

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

 

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: