Vue.set( target, propertyName/index, value )
参数：
{Object | Array} target
{string | number} propertyName/index
{any} value
返回值：设置的值。
用法：
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)
注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
可以使用这两个方法来设置响应式属性
vm.$set
Vue.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 id="root">
<p v-for="(item,index) in students ">{{item}}</p>
<button @click="adddata">点击加一条数据</button>
</div>
</body>
<!-- 使用cdn方式引入vue--对于制作原型或学习，你可以这样使用最新版本： -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
//初始化一个vue实例
Vue.config.productionTip = false
var vm = new Vue({
el: "#root",
data: {
students: {
name: "aaa",
age: 11
}
},
created: function() {
console.log(this);
},
methods: {
adddata() {
vm.$set(this.students, 'sex', 'femal');
//Vue.set(this.students, 'sex', 'femal')
}
},
})
</script>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）