vue中vue.set有哪些参数

　　介绍

这篇文章将为大家详细讲解有关vue中vue.set有哪些参数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

vue中vue.set有3个参数,分别是:1,目标,表示要更改的数据源;2,钥匙,表示要更改的具体数据;3,值,表示重新赋的值。

<强> vue.set()

vue.set(,目标,关键,,value )

参数:

<李>

目标:要更改的数据源(可以是对象或者数组)

<李>

关键:要更改的具体数据

<李>

值:重新赋的值

官方API: vue.set ()

<强> vue。设置的使用

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; title> & lt;/title> 　　& lt;/head> 　　& lt; body> 　　& lt; div  id=癮pp2"祝辞 　　,,,& lt; p  v=癷tem  items",拷贝:关键=癷tem.id"比; 　　,,,,,,,{{item.message}} 　　,,,& lt;/p> 　　,,,& lt; button  @click=癰tn2Click()“在动态赋值& lt;/button> & lt; br/祝辞,,,, 　　,,,& lt; button  @click=癰tn3Click(),在为新数据增属性& lt;/button> 　　& lt;/div> 　　& lt; script  src=? ./. ./dist/vue.min.js"祝辞& lt;/script> 　　& lt; script> 　　Vue ({var  vm2=new  　　,,,埃尔:“# app2" 　　,,,数据:{ 　　,,,,,,,项目:( 　　,,,,,,,,,,,{信息:“Test 人的id:“1“;}, 　　,,,,,,,,,,,{信息:“Test  two", id:“2“;}, 　　,,,,,,,,,,,{信息:“Test  three", id:“3“} 　　,,,,,,,) 　　,,,}, 　　,,,方法:{ 　　,,,,,,,btn2Click:函数(){ 　　,,,,,,,,,,,Vue.set (this.items 0{信息:“Change  Test", id: & # 39; 10 & # 39;}) 　　,,,,,,,}, 　　,,,,,,,btn3Click:函数(){ 　　,,,,,,,,,,,var  itemLen=this.items.length; 　　,,,,,,,,,,,Vue.set (this.items itemLen,{信息:“Test  add  attr", id: itemLen}); 　　,,,,,,,} 　　,,,} 　　}); 　　& lt;/script> 　　& lt;/body> 　　& lt;/html>

此时页面是这样

vue中vue。设置有哪些参数

我点击第一个按钮后运行中方法的btn2Clcick方法,此时我要将测试alt=" vue中vue。设置有哪些参数">

运行后的结果:此时列表中第一列的测试alt=" vue中vue.set有哪些参数">

这里得警惕一种情况:

当写惯了JS之后,有可能我会想改数组中某个下标的中的数据我直接。项目(XX)就改了,如:

btn2Click:函数(){ 　　this.items才能[0]={信息:“Change  Test", id: & # 39; 10 & # 39;} 　　}

我们来看看结果:

vue中vue。设置有哪些参数

这种情况,是Vue文档中明确指出的注意事项,由于JavaScript的限制,Vue不能检测出数据的改变,所以当我们需要动态改变数据的时候,Vue.set()完全可以满足我们的需求。

仔细看的同学会问了,这不是还有一个按钮吗,有什么用?

我们还是直接看:

Vue中Vue。设置有哪些参数

这是初始的列表数据,数据里面有三个对象

点击之后:

vue中vue.set有哪些参数

这里可以看的出,vue.set()不光能修改数据,还能添加数据,弥补了vue数组变异方法的不足

提示:vue.set()在方法中也可以写成这样。美元组()

关于vue中vue.set有哪些参数就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

vue中vue.set有哪些参数