vue 中this.$set 动态绑定数据的案例讲解


Posted in Vue.js onJanuary 29, 2021

感觉网上对this.$set的讲解乱糟糟的,我来总结一下对它单个数据、对象、数组、json数据的绑定.

话不多说直接上代码:

<template>
  <div>
    <!-- 单个数据 -->
    <button @click="text0a">text0</button>
    <p>text0: {{text0}}</p>
    <!-- 对象 -->
    <button @click="textObja">textObj</button>
    <p>textObj.text1: {{textObj.text1}}</p>
    <!-- 数组 -->
    <button @click="textArra">textArr</button>
    <p>textArr[1]: {{textArr[1]}}</p>
    <!-- json数据 -->
    <button @click="textJsona">textJson</button>
    <p>textJson[1].t5: {{textJson[1].t5}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return{
      text0 : '',
      textObj: {},
      textArr: [],
      textJson:[
        {t0: ''},
        {t4: ''},
        {t7: ''},
      ]
    }
  },
  methods: {
    text0a: function () {
      let vm = this
      let text100 = 'efghjk'
      vm.$set(vm,'text0',text100) 
      //等效于 vm.$set(vm,'text0','efghjk')
    },
    textObja: function () {
      let vm = this
      let textObj100 = {
        text1: '123',
        text2: '456'
        }
      vm.$set(vm.textObj,'text1',textObj100.text1) 
      //此时等效于 vm.$set(vm,'textObj',textObj100)
    },
    textArra: function () {
      let vm = this
      let textArr200 = ['a1','a2','a3']
      vm.$set(vm,'textArr',textArr200)
    },
    textJsona: function () {
      let vm = this
      let textJson300 = [
        {t1: 't1',t2: 't2',t3: 't3'},
        {t4: 't4',t5: 't5',t6: 't6'},
        {t7: 't7',t8: 't8',t9: 't9'},
      ]
      vm.$set(vm.textJson[1],'t5',textJson300[1].t5) 
      //此时等效于 vm.$set(vm,'textJson',textJson300)
    }
  }
}
</script>
<style>
</style>

补充:Vue 使用$set动态给数据设置属性

在实际的开发过程中,给表单元素绑定model的时候,绑定的元素的属性是根据后台数据动态生成的。如果使用常规的赋值方式,是无法更新视图的

需要使用

this.$set(dataName,keyName,keyValue)
export default {
 data:{
  // 先定义一个空对象
  formObject:{},
  arrayList:[],
 },
 mounted() {
  this.initPage()
 },
 methods:{
  initPage(){
   this.$store.dispatch(namespace/callData).then(res=>{
    // 给数据设置key-value
    res.data.forEach(item=>{
     // ❗❗❗❗❗ this.formObject[item.name] = item.value // ❗❗❗❗ 这种方式是不能更新视图的
     this.$set(this.formObject, item.name, item.value) // ✅✅✅✅可以更新视图
    })
   })
   // 修改数组
    this.$store.dispatch(namespace/callData).then(res=>{
    // 给数据设置key-value
    this.$set(this.arrayList,0,(res.data)[0].id) ✅✅✅✅可以更新视图
   })
  }
 }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。如有错误或未考虑完全的地方,望不吝赐教。

Vue.js 相关文章推荐
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue穿梭框实现上下移动
Jan 29 #Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 #Vue.js
Vue ​v-model相关知识总结
Jan 28 #Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 #Vue.js
vscode自定义vue模板的实现
Jan 27 #Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 #Vue.js
You might like
PHP clearstatcache()函数详解
2010/03/02 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python操作json的方法实例分析
2018/12/06 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python speech模块的使用方法
2020/09/09 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
活动总结书
2014/05/08 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
雾霾停课通知
2015/04/24 职场文书
通知书大全
2015/04/27 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang