如何重置vue打印变量的显示方式

前言

我们在日常开发中，经常会碰到vue使用console.log()打印变量，会有多余我们不期望看到的属性

而且展开方式不友好

所以我们可以来重置一个打印方式，下面话不多说了，来一起看看详细的介绍吧。

方法如下：

在main.js文件中添加一下代码

Vue.prototype.print = (obj,type) => {
 type = type || "log";
 const log = JSON.parse(JSON.stringify(obj));
 console[type](log)
}

以后我们打印变量就可以直接使用

this.print(obj)
//或者
this.print(obj,"error")

这样打印出来的信息就是以我们熟悉的方式打印了

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 详解VUE 定义全局变量的几种实现方式

    最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量. 1.全局变量专用模块 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好. 全局变量专用模块 Global.vue <script type="text/javascript"> const colorList = [ '#F9F900', '#6FB7B7', '#9999CC', '#B766AD', '#B87070', '#FF8F59'

  • Vue中定义全局变量与常量的各种方式详解

    前言 本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 global.js 并且在其中定义 let a = 10; 在入口文件中引入 global.js import './global.js' 在项目中使用: a // 报错 发现报错了, a 并没有定义. 为什么? 这个涉及到模块作用域: 1 每一个 js 都相当于

  • 浅谈在vue项目中如何定义全局变量和全局函数

    写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vu

  • vue中如何实现变量和字符串拼接

    vue中如何实现变量和字符串拼接

    整理文档,搜刮出一个vue中如何实现变量和字符串拼接的代码,稍微整理精简一下做下分享. 在data中定义变量: data() { return { a: 'A' } } 如何通过按钮点击实现字符串和变量a的拼接呢? <button @click='showMsg'></button> //vue methods: { showMsg() { alert(`获取了${a}`); } } 注意alert()里不是单引号,而是两个 ` 号(esc下面的按键). 点击按钮出现 以上就是本文

  • 如何重置vue打印变量的显示方式

    如何重置vue打印变量的显示方式

    前言 我们在日常开发中,经常会碰到vue使用console.log()打印变量,会有多余我们不期望看到的属性 而且展开方式不友好 所以我们可以来重置一个打印方式,下面话不多说了,来一起看看详细的介绍吧. 方法如下: 在main.js文件中添加一下代码 Vue.prototype.print = (obj,type) => { type = type || "log"; const log = JSON.parse(JSON.stringify(obj)); console[typ

  • 解决vue的变量在settimeout内部效果失效的问题

    解决方法如下: 1.定义一个self暂存this 2.再改变变量的值,则生效啦 var self=this; this.toastrVal = inVal; this.loadState = true; this.noBg = bgState; setTimeout(function () { self.loadState = false; }, 3000) 拓展知识:解决vue在setTimeout内修改this失效的问题 当在vue中使用定时器来修改一个变量值的时候,发现没有效果,这是由于s

  • python内打印变量之%和f的实例

    如下所示: # 方法一:% a = "hello" b = "world!" print("你好,%s %s" % (a,b)) # 方法二:f a = "hello" b = "world!" print(f"你好,{a} {b}) 如上图,可见f方法代码量会简洁些,但它只支持python3.6及以后的版本. "\n" 换行符 "\t" tab缩进符 pr

  • vue data变量相互赋值后被实时同步的解决步骤

    数据结构是这样子的 data() { return { title: 'web前端 this data变量相互赋值后被实时同步问题', val_1: 'vue', val_2: '' } } 问题源: 我们在onload()把val_1 赋给 val_2 (或者在用户click时更改也都会出现这个问题) onload() { this.val_2 = this.val_1; } 解决方法: 我们在通过JavaScript把 "val_1" 转换成字符串类型,再JSON.parse,最后

  • vue 避免变量赋值后双向绑定的操作

    如: this.list = this.list2, 结果在list改变后 list2也改变,这不是我们想要的效果 第一种: 利用 JSON.parse 和 JSON.stringify this.list= JSON.parse( JSON.stringify(this.list2) ) 第二种: ES6 的解析语法 this.list= { ...this.list2} this.arr= [...this.arr2] 补充知识:解决vue中v-model绑定的变量赋值给了另一个变量后,两个

  • vue打印功能实现的两种方法总结

    vue打印功能实现的两种方法总结

    第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入 安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print); //注册 3,现在就可以使用了 <div id="printTest" > <p>明月照于山间</p> <p>清风来于江上 </p> </div> <butt

  • vue打印插件vue-print-nb的实现代码

    1.引入插件npm install vue-print-nb --save 在main.js中引入 import Print from 'vue-print-nb'Vue.use(Print) 2.html代码 <div class="box"> <div id="printTest" class="upTable"> <table> <tr> <td class="title&qu

  • Vue打印错误日志问题

    目录 Vue3全局方法和静态配置文件的最佳实践 Vue3全局方法最佳方案 1.添加一个工具类,例如utils.ts 2.这么用 Vue3引入静态配置文件最佳方案 Vue3全局方法方案二 1.先吧全局方法写到tools.js文件中 2.在Index.html中引入 3.在ts,js代码中直接使用 Vue2中打印日志的最佳实践 Vue3全局方法和静态配置文件的最佳实践 Vue3中打印错误日志的最佳实践: 推荐引入全局自定义方法clog,任何地方打印任何类型 在Vue3.0中全局的方法一般有下面两个

  • 从训练好的tensorflow模型中打印训练变量实例

    从tensorflow 训练后保存的模型中打印训变量:使用tf.train.NewCheckpointReader() import tensorflow as tf reader = tf.train.NewCheckpointReader('path/alexnet/model-330000') dic = reader.get_variable_to_shape_map() print dic 打印变量 w = reader.get_tensor("fc1/W") print t

  • Vue如何实现变量表达式选择器

    Vue如何实现变量表达式选择器

    在 input 输入框中输入表达式在中台项目中是比较常见的场景.其通常是输入一个特定的字符时(如 $ 字符),显示下拉列表,用户点选下拉列表中的变量,然后继续在 input 输入框中输入其它运算符,组成一个表达式,其效果如下图: 在之前的项目中,使用 React + TypeScrpt 实现了React版的变量表达式选择器,在本文中,我们将会介绍使用Vue如何实现一个变量表达式选择器. 该变量表达式将会实现以下效果: 当在输入框中输入特定字符时,显示下拉列表: 可通过键盘上下键切换下拉选项,鼠标

随机推荐