关于console.log打印结果是 [object Object]的解决

目录
  • console.log打印结果是 [object Object]
    • 问题
    • 解决方案
  • 对object.object和object[object]的认识
    • 发现
    • 案例

console.log打印结果是 [object Object]

问题

之前使用的+ 进行连接，如： console.log("前端参数param是："+self.filters.ip)

显示结果是：   [object Object]

解决方案

在VUE文件中，打印拼接的原始数据用  ， 隔开，如

console.log("前端参数param是："，self.filters.ip)

结果即可正常显示：

对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]
    }
  }

结果如下：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 谈谈我在vue-cli3中用预渲染遇到的坑

    前言 在开发自己的个人网站的时候后,选择了用vue来开发,不可避免的遇到要对seo做优化.鉴于目前页面也不多,因此首先采用的是预渲染的方式. 本来以为把插件一装,配置一配,咔咔咔就能搞定,结果发现并没有想的那么简单.因为首先就遇到了两个报错,折腾了半个晚上. 问题及解决方案 第一个报错: Unable to prerender all routes! 这个问题是在设置好配置之后,build的时候报出来的.主要症状就是打开了浏览器后卡主不动,然后就强制退出了. 解决方案: 参考了github上的i

  • Vue Cli3 打包配置并自动忽略console.log语句的方法

    下载插件 npm i -D uglifyjs-webpack-plugin 在 vue.config.js 引入使用 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { configureWebpack: { plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress: { drop_console: true, }, }, }), ],

  • 五分钟教你使用vue-cli3创建项目(新手入门)

    五分钟教你使用vue-cli3创建项目(新手入门)

    目录 一.搭建vue环境 二.Vue脚手架工具 三.创建项目 四.选择manually select (enter键确认,并进入下一步) 五.选择完成之后回车 这里我们选择3.x的 六.完成之后回车 出现以下界面 七.回车 出现以下界面 八.回车出现以下界面 九.回车出现以下界面 十.回车出现以下界面 十一.回车出现以下界面 十二.根据提示,启动项目 一.搭建vue环境 安装Nodejs 官网下载Nodejs,如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版,稳定

  • js console.log打印对象时属性缺失的解决方法

    1. 序 在编写代码时,我们常常用 console.log() 的方式将信息在控制台中打印出来以帮助我们进行前端调试.一般情况下,我们打印普通值都没有问题,但在打印对象类型时,我们就需要注意点了,要不然可能会出现不符合期望的结果. 2. console.log()输出对象属性缺失 首先,定义了一个 cat对象 ,其拥有 name, age, color, birthday 四个属性. 接着,我们又定义了一个函数 test ,它接收一个对象作为参数.调用test函数时,我们想知道传入test函数的

  • 关于console.log打印结果是 [object Object]的解决

    关于console.log打印结果是 [object Object]的解决

    目录 console.log打印结果是 [object Object] 问题 解决方案 对object.object和object[object]的认识 发现 案例 console.log打印结果是 [object Object] 问题 之前使用的+ 进行连接,如: console.log("前端参数param是:"+self.filters.ip) 显示结果是:   [object Object] 解决方案 在VUE文件中,打印拼接的原始数据用  , 隔开,如 console.log

  • js console.log打印对像与数组用法详解

    js console.log打印对像与数组用法详解

    本文实例讲述了js console.log打印对像与数组用法.分享给大家供大家参考,具体如下: console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump.console.log这个函数本身没什么好说的,这篇博客告诉大家怎么去用这个函数.在说这个函数之前,我想大家用的最多查看js输出,是alert吧,但是alert,只能弹string或者是int的 一.测试文件test.html <html xmlns="http://www

  • vue中使用console.log打印的实现

    目录 vue使用console.log打印 注释vue中所有的console.log vue使用console.log打印 1.使用window.console.log() 2.更改配置: 在package.json文件中的eslintConfig选项中rules对象里面增加:“no-console”:“off” 注释vue中所有的console.log 在前端开发的过程中一般会打印很多的日志但是要发布到线上的时候不希望客户看到其他的信息,但是一个一个的注释太麻烦也不利于以后进行更新 下面是个很

  • 从console.log说起(console.log详细介绍)

    从console.log说起(console.log详细介绍)

    console.log,作为一个前端开发者,可能每天都会用它来分析调试,但这个简单函数背后不简单那一面,你未必知道-- 基础 首先,简单科普这个函数的作用.前端开发者可以在js代码的任何部分调用console.log,然后你就可以在浏览器的开发者控制台里,看到这个函数调用的那一瞬间你指定的变量或表达式的值. 最基本的调用方法: console.log('123'); // 123 console.log('1', '2', '3'); // 1 2 3 console.log('1\n2\n3\

  • 如何使用JS console.log()技巧提高工作效率

    我们知道 console.log(message)用法很简单,表示将参数message 打印到控制台上. console.log('前端小智') // 前端小智 const myAge = 28 console.log(myAge) // 28 本文主要介绍5个有用的技巧,可帮助你在使用console.log()时提高工作效率. 1. 打印全名变量 如果在控制台打印多个变量,是数量比较多的情况下,我们很难区别哪个变量对应哪个值. function sum(a, b) { console.log(

  • javascript的console.log()用法小结

    console.log 原先是 Firefox 的"专利",严格说是安装了 Firebugs 之后的 Firefox 所独有的调试"绝招". 这一招,IE8 学会了,不过用起来比 Firebugs 麻烦,只有在开启调试窗口(F12)的时候,console.log 才能出结果,不然就报错. 今天看到 Opera 也有个叫 dragonfly 的东东,用这东西查看 DOM,已经可以和 Firebug 媲美,然而还是不能用 console.log.于是有人就提供了这样两句

  • javascript 在firebug调试时用console.log的方法

    console.log(); 当你使用console.log()函数时,下面的firebug一定要打开,不然这函数在用firefox运行时无效且影响正常程序,如果用IE打开,将会出错. 第一个参数可以是一个包含格式化占位符输出的字符串,例如: console.log("The %s jumped over %d tall buildings", animal, count); 格式化字符串 类型 %s 字符串 %d, 整型 %i (暂不支持数字型) %f 浮点型 (暂不支持数字型) %

  • javascript 中的console.log和弹出窗口alert

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 1.他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容. 2.console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作. 3.onsole里面的内容非常丰富,你可以在控制台输入:console,然后就可看到: Console {memory: Memo

  • SpringBoot log打印及输出方式

    SpringBoot log打印及输出方式

    目录 SpringBoot log打印及输出 导入jar包 代码示例 日志输出配置 springboot切面技术打印log日志 mvaen 准备 还有spring家族的 创建 WebLogAcpect 类 配置log4j SpringBoot log打印及输出 导入jar包 import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; 代码示例 private final Log log

随机推荐