向响应式属性中添加一个实例,并确保其为响应式的。
例如:学生属性原先没有性别,现要添加一个性别属性,并且是响应式的。
以下两句都可以,任选一个即可
Vue.set(this.student, 'sex', '男')//this指的是vm._data,也就是vm.data
this.$set(this.student, 'sex', '男'),
注意:
不能直接给data添加响应式属性,也不可以给Vue实例。即下图红色框里的不可以给他们添加
//以下两句都是错误的
Vue.set(this, 'sex', '男')//this指的是vm._data,也就是vm.data
Vue.set(Vue, 'sex', '男')
在Vue修改数组中某个元素的方法:
1、使用这些能够修改本身数组的API:
push()在末尾添加一个元素、
pop()删除末尾的一个元素、
shift()删除第一个元素、
unshift()在首部添加一个元素、
reverse()将数组顺序颠倒、
sort()升序排序、
splice()从几开始到几,用什么替换
2、Vue.set()和vm.$set()
例子
methods: {
addSex() {
//添加性别属性,默认值:男
Vue.set(this.student, 'sex', '男')
// this.$set(this.student, 'sex', '男'),
},
addFriend() {
//在列表首位添加一位朋友
this.student.friends.unshift({ name: 'Sam', age: 21 })
},
changeFriend() {
//修改第一个朋友的名字为:张三
this.student.friends[0].name = '张三'
},
addHobby() {
//添加一个爱好
this.student.hobby.push('打牌')
},
changeHobbyCar() {
//修改第一个爱好为:开车
Vue.set(this.student.hobby, 0, '开车')
}
},
}