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实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
简单介绍Ruby中的CGI编程
2015/04/10 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
C++是不是类型安全的
2014/02/18 面试题
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
初级会计求职信范文
2014/02/15 职场文书
数学检讨书1000字
2014/02/24 职场文书
《石榴》教学反思
2014/03/02 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
服务整改报告
2014/11/06 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
简单聊聊Golang中defer预计算参数
2022/03/25 Golang