【vue知识】vue中给data动态添加响应式数据或属性值的方法
vue中给data动态添加响应式数据或属性值的方法文件结构源代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><d
·
vue中给data动态添加响应式数据或属性值的方法
文件结构
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg.tom}}</div>
<div>{{msg.jerry}}</div>
<div>{{msg.spike}}</div>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
/*
默认data中定义的属性都是响应式
*/
let vm = new Vue({
el: '#app',
data: {
msg: {
tom: 'TOM'
}
},
created: function () {
// 后续动态添加的data中的属性不具备响应式能力
this.msg.jerry = 'JERRY'
// 其实,可以借助Vue提供了相关API动态添加响应式属性
//方法一
// this.$set(this.msg, 'spike', 'SPIKE')
//方法二
Vue.set(this.msg, 'spike', 'SPIKE')
}
})
</script>
</body>
</html>
显示为
动态添加的data中的属性不具备响应式能力,图解
实现动态添加的data中的属性具备响应式能力
方法一:vm.$set方法:https://cn.vuejs.org/v2/api/#vm-set
this.$set(this.msg, 'spike', 'SPIKE')
图解
方法二:Vue-set方法:https://cn.vuejs.org/v2/api/#Vue-set
Vue.set(this.msg, 'spike', 'SPIKE')
图解
更多推荐
已为社区贡献72条内容
所有评论(0)