VUE中对object.object和object[object]的使用解读

 更新时间:2023年06月05日 14:20:27   作者:拉风的小锋  
这篇文章主要介绍了VUE中对object.object和object[object]的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

对object.object和object[object]的使用

发现

在做项目的过程中偶然发现了使用object[object]和object.object得到的结果结果是一样的,这让我感觉到很讶异,毕竟以前使用object[object]都是在数组中使用的,并没有这样使用过。

案例

const lineChartData = {
  newVisitis: {
    expectedData: ['2020-12-1', '2020-12-2', '2020-12-3', '2020-12-4', '2020-12-5', '2020-12-6', '2020-12-7'], //每日注册人数日期
    actualData: [120, 82, 91, 154, 162, 140, 145] //每日注册人数
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

如上,若我们使用newVisitis内的对象,那么我们肯定是通过this.lineChartData.newVisitis这样获取的。

但是此时我们通过**this.lineChartData[newVisitis]**也可以获取到

代码如下:

 methods: {
    handleSetLineChartData(type) {
      console.log(type)
      console.log( lineChartData[type]," lineChartData[purchases]")
      console.log( lineChartData.purchases," lineChartData.purchases")
      this.lineChartData = lineChartData[type]
    }
  }

结果如下:

vue中赋值图片无法显示src=“[object,Object]”

vue中图片被编译成[Object,Object]

在package.lock.json文件中的"url-loader"中添加代码

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue导入Echarts实现折线散点图

    Vue导入Echarts实现折线散点图

    这篇文章主要为大家详细介绍了Vue导入Echarts实现折线散点图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 解决element-ui库的el-row的gutter=10间距失效问题

    解决element-ui库的el-row的gutter=10间距失效问题

    这篇文章主要介绍了解决element-ui库的el-row的gutter=10间距失效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 基于Vue实现鼠标滚动轮控制页面横向滑动效果

    基于Vue实现鼠标滚动轮控制页面横向滑动效果

    这篇文章主要介绍了如何基于Vue实现鼠标滚动轮控制页面横向滑动效果,文中通过代码示例和图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-09-09
  • 在vue中使用Echarts利用watch做动态数据渲染操作

    在vue中使用Echarts利用watch做动态数据渲染操作

    这篇文章主要介绍了在vue中使用Echarts利用watch做动态数据渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue实现移动端可拖拽式icon图标

    vue实现移动端可拖拽式icon图标

    这篇文章主要为大家详细介绍了vue实现移动端可拖拽式icon图标,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 解决vue动态为数据添加新属性遇到的问题

    解决vue动态为数据添加新属性遇到的问题

    今天小编就为大家分享一篇解决vue动态为数据添加新属性遇到的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解vue更改头像功能实现

    详解vue更改头像功能实现

    这篇文章主要介绍了vue更改头像功能实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue实现左右点击滚动效果

    vue实现左右点击滚动效果

    这篇文章主要为大家详细介绍了vue实现左右点击滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue3中引入svg矢量图的实现示例

    vue3中引入svg矢量图的实现示例

    在项目开发过程中,我们经常会用到svg矢量图,本文主要介绍了vue3中引入svg矢量图的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • Map.vue基于百度地图组件重构笔记分享

    Map.vue基于百度地图组件重构笔记分享

    这篇文章主要为大家分享了Map.vue基于百度地图组件重构笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04

最新评论