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中router-link标签所必备了解的属性

    详解vue中router-link标签所必备了解的属性

    这篇文章主要介绍了vue中router-link标签所必备了解的属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue项目依赖升级报错处理方式

    vue项目依赖升级报错处理方式

    这篇文章主要介绍了vue项目依赖升级报错处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 深入探讨Vue3中Composition API的使用方法

    深入探讨Vue3中Composition API的使用方法

    Vue3的Composition API是一个全新的API,它允许开发人员将Vue组件中的逻辑封装在单独的功能性组合中,而不是依赖于Vue选项对象。这篇文章将深入探讨Vue3的Composition API及其使用方法,需要的朋友可以参考下
    2023-07-07
  • 前端Vue项目部署到服务器的全过程以及踩坑记录

    前端Vue项目部署到服务器的全过程以及踩坑记录

    使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程,下面这篇文章主要给大家介绍了关于前端Vue项目部署到服务器的全过程以及踩坑记录的相关资料,需要的朋友可以参考下
    2023-05-05
  • 如何利用Vue3+Vite批量导入模块/资源

    如何利用Vue3+Vite批量导入模块/资源

    这篇文章主要给大家介绍了关于如何利用Vue3+Vite批量导入模块/资源的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • Vue.js 的 watch函数基本用法

    Vue.js 的 watch函数基本用法

    watch 函数是 Vue.js 提供的一个强大工具,用于响应数据变化并执行相应的回调,通过合理使用 watch 函数,我们可以实现异步数据请求、表单验证、动态样式等多种功能,这篇文章主要介绍了Vue.js 的 watch函数,需要的朋友可以参考下
    2024-08-08
  • vue+springboot实现登录验证码

    vue+springboot实现登录验证码

    这篇文章主要为大家详细介绍了vue+springboot实现登录验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 基于Vue3和element-plus实现登录功能(最终完整版)

    基于Vue3和element-plus实现登录功能(最终完整版)

    这篇文章主要介绍了基于Vue3和element-plus实现一个完整的登录功能,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • vue动态绘制四分之三圆环图效果

    vue动态绘制四分之三圆环图效果

    这篇文章主要介绍了vue动态绘制四分之三圆环图效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 详解TypeScript+Vue 插件 vue-class-component的使用总结

    详解TypeScript+Vue 插件 vue-class-component的使用总结

    这篇文章主要介绍了TypeScript+Vue 插件 vue-class-component的使用总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论