vue.set和this.$set,vue this.setData
这篇文章主要介绍了某视频剪辑软件中这个10.95美元一套动态绑定数据的案例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
感觉网上对这个10.95美元一套的讲解乱糟糟的，我来总结一下对它单个数据、对象、数组、json数据的绑定。
话不多说直接上代码：
模板
差异
！-单个数据-
button @ click= text0a text 0/button
ptext0: {{text0}}/p
！-对象-
按钮@ click= text obja text obj/button
ptext对象。文本1:{ { text obj。text 1 } }/p
！-数组-
button @ click= textArra textarr/button
ptextArr[1]: {{textArr[1]}}/p
！- json数据-
按钮@ click= text JSON text JSON/button
ptextJson[1]。t5:{ { textJson[1]。t5 } }/p
/div
/模板
脚本
导出默认值{
data() {
返回{
文本0:"",
textObj: {}，
textArr: []，
textJson:[
{t0: }，
{t4: }，
{t7: }，
]
}
},
方法：{
text0a: function () {
让vm=这个
let text100=efghjk
虚拟机.$set(虚拟机，文本0 ,文本100)
//等效于虚拟机.$set(vm， text0 ， efghjk )
},
textObja: function () {
让vm=这个
让textObj100={
文本1:"123",
短信2:"456"
}
虚拟机.$set(vm.textObj， text1 ，textObj100.text1)
//此时等效于虚拟机.$set(虚拟机， textObj ，textObj100)
},
textArra: function () {
让vm=这个
设textArr200=[a1 ， a2 ， a3]
虚拟机.$set(虚拟机， textArr ，textArr200)
},
textJsona: function () {
让vm=这个
let textJson300=[
{t1: t1 ，t2: t2 ，t3: t3}，
{t4: t4 ，t5: t5 ，t6: t6}，
{t7: t7 ，t8: t8 ，t9: t9}，
]
虚拟机.$set(vm.textJson[1]， t5 ，textJson300[1].t5)
//此时等效于虚拟机.$set(虚拟机，文本Json ，文本Json300)
}
}
}
/脚本
风格
/风格
补充：Vue 使用$set动态给数据设置属性
在实际的开发过程中，给表单元素绑定模型的时候，绑定的元素的属性是根据后台数据动态生成的。如果使用常规的赋值方式，是无法更新视图的
需要使用
这个$set(数据名，关键字名，关键字值)
导出默认值{
数据：{
//先定义一个空对象
表单对象：{},
数组列表：[],
},
已安装(){
this.initPage()
},
方法：{
initPage(){
这个store.dispatch(命名空间/调用数据)。然后(res={
//给数据设置键值
res.data.forEach(item={
//这个。表单对象[项目。名称]=项目。value//这种方式是不能更新视图的
这个. set(this.formObject，item.name，item.value) //可以更新视图
})
})
//修改数组
这个store.dispatch(命名空间/调用数据)。然后(res={
//给数据设置键值
这个. set(this.arrayList，0，(res.data)[0].id)可以更新视图
})
}
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。如有错误或未考虑完全的地方，望不吝赐教。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。