vue中动态改变对象或是数组数据,保证页面也是跟着随时改变的
可以改变的有三种办法
很多时候我们改变了数据,但页面却没有实时更新,这是我们需要判断此时的值是否为响应的。我们试着打印对象或数组,当在控制台中显示的是这样的时候则图片中显示的所有字段均为响应式数据 第一种:改变引用
data:{
object:{
name:'奥特曼',
age:'无法探知'
}
}
object = {
name:'奥特曼',
age:'无法探知',
hobby:‘打怪兽’
}
第二 种:是用数组api push(),pop(),shift(),splice(),sort(),reverse()
第三种:是用vue中的this.$set
this.$set接受的三个参数, 第一个参数是要修改的对象或数组 第二个参数是字符串或数值, 第三个参数是改变的值
data(){
return {
arr:[1,2,3]
list:{
name:'张三',
}
created(){
this.$set(this.arr,数组的下标,'修改的值')//也可以添加值,如果下标超过就会变成添加
this.$set(this.list,'name','王五'),和数组一样也可以添加值
}
}
这个就是添加是数组的,对象也是一样的
~~~ 需要注意的是 data{ arr:[ {name:‘张三’} ] } 这种数组下的对象,这是是不能修改
|