Vue中响应式改变数组/对象的显示(vue中的数组/对象的set方法)

461 阅读1分钟

数组(3种方法)

image.png image.png 这个数据是一般来说,我们在真实的项目中获取到的数据,想响应式的改变数组里的值

直接操作下标,发现只会有数据层变,但页面不会变

想再加一个第五项,直接给第五项赋值发现并没有渲染出来第五项(数据其实已经加进去了,但并没有动态渲染出来) image.png

方法:

1. 通过数组的七个变异方法实现动态渲染——push pop shift unshift splice sort reverse

push数据,发现可以动态渲染出来 image.png splice方法在数组里删除下标为1的项,在这个位置增加一条数据,数据值为Dell1 image.png

2. 改变数组的引用:直接给他一个新的数组

image.png

3a. 使用vue的set方法(vue.set)

image.png

3b. 使用vue的set方法(实例名.$set)

image.png

对象(2种方法)

image.png

image.png

想改变对象中dell的值为dell lee

直接操作对象,数据变了页面也会变(和数组不一样!)

image.png

想往对象中再加一个属性呢?

直接给对象赋值:发现不行,数据变了但是页面没变

image.png

方法:

1. 直接给他一个新的对象(改变引用,和数组一样)

image.png

2a. 可以使用Vue.set,加一个值address:beijing,使其响应式响应

image.png

2b. 或者用vue实例的名字+$set

image.png