vue+this.$set+Vue.set的使用
Posted web半晨
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+this.$set+Vue.set的使用相关的知识,希望对你有一定的参考价值。
1、html代码
<el-row>
<el-col>
<span>1:</span>
<el-button type="primary" @click="clickBtn(1)">基本数据类型-赋值</el-button>
<span v-text="value"></span>
</el-col>
<el-col style="margin-top: 0.7em;">
<span>2:</span>
<el-button type="primary" @click="clickBtn(2)">对象类型-赋值</el-button>
<span>objectValue.value</span>
</el-col>
<el-col style="margin-top: 0.7em;">
<span>3:</span>
<el-button type="primary" @click="clickBtn(3)">对象纯数组类型-赋值</el-button>
<span>objectArrayValue.value[0]</span>
</el-col>
<el-col style="margin-top: 0.7em;">
<span>4:</span>
<el-button type="primary" @click="clickBtn(4)">对象数组对象类型-赋值</el-button>
<span>objectArrayObjectValue.value[0].value</span>
</el-col>
<el-col style="margin-top: 0.7em;">
<span>5:</span>
<el-button type="primary" @click="clickBtn(5)">纯数组类型-赋值</el-button>
<span>arrayValue[0]</span>
</el-col>
<el-col style="margin-top: 0.7em;">
<span>6:</span>
<el-button type="primary" @click="clickBtn(6)">数组对象类型-赋值</el-button>
<span>arrayObjectValue[0].value</span>
</el-col>
<el-col style="margin-top: 0.7em;">
<span>7:</span>
<el-button type="primary" @click="clickBtn(7)">数组对象纯数组类型-赋值</el-button>
<span>arrayObjectArrayValue[0].value[0]</span>
</el-col>
</el-row>
2、javascript代码
clickBtn(type)
if (type == 1)
this.value = type; // 更新成功
// this.$set(this, 'value', type); // 更新成功
// Vue.set(this, 'value', type); // 更新成功
else if (type == 2)
this.objectValue.value = 2; // 更新成功
// this.$set(this.objectValue, 'value', type); // 更新成功
// Vue.set(this.objectValue, 'value', type); // 更新成功
else if (type == 3)
// this.objectArrayValue.value[0] = type; // 更新失败
this.$set(this.objectArrayValue.value, 0, type); // 更新成功
// Vue.set(this.objectArrayValue.value, 0, type); // 更新成功
else if (type == 4)
this.objectArrayObjectValue.value[0].value = type; // 更新成功
// this.$set(this.objectArrayObjectValue.value[0], 'value', type); // 更新成功
// Vue.set(this.objectArrayObjectValue.value[0], 'value', type); // 更新成功
else if (type == 5)
// this.arrayValue[0] = type; // 更新失败
this.$set(this.arrayValue, 0, type); // 更新成功
// Vue.set(this.arrayValue, 0, type); // 更新成功
else if (type == 6)
this.arrayObjectValue[0].value = type; // 更新成功
// this.$set(this.arrayObjectValue[0], 'value', type); // 更新成功
// Vue.set(this.arrayObjectValue[0], 'value', type); // 更新成功
else if (type == 7)
// this.arrayObjectArrayValue[0].value[0] = type; // 更新失败
// this.$set(this.arrayObjectArrayValue[0].value, 0, type); // 更新成功
Vue.set(this.arrayObjectArrayValue[0].value, 0, type); // 更新成功
3、完成代码
gitee(码云) - mj01分支 - vue_set 文件夹
4、相关链接
以上是关于vue+this.$set+Vue.set的使用的主要内容,如果未能解决你的问题,请参考以下文章