指向型数据类型 数组和对象 可以使用全局方法:vue.set(对象,key,value)来修改 防止数据修改不会渲染视图 用实例方法vm. s e t 或 t h i s . set或this. set或this.set也可以得到相同效果
点击按钮 添加新的属性
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<ul>
<li v-for="(item,index) in arr" :key="index">{{item}}</li>
<li v-for="(item,keyI,index) in obj" >
{{keyI}} : {{item}}
</li>
</ul>
<button @click="addArr">添加(数组)</button></button>
<button @click="addObj">添加(对象)</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script>
var vm = new Vue({
el : ".app",
data : {
arr : ["a","b","c"],
obj : {
"name" : "小明",
"age" : 13,
"class" : 2
}
},
methods: {
addArr (){
// this.arr.push("d");
this.$set(this.arr,4,"d")
},
addObj (){
// this.$set(this.obj,"sex","m");
// Vue.set(this.obj,"sex","m")
vm.$set(this.obj,"sex","m");
}
}
});
</script>
</body>
</html>