vue filters过滤器的统一封装「建议收藏」

vue filters过滤器的统一封装「建议收藏」目录统一封装规则统一封装规则1、src文件夹下创建filters文件夹,然后再filters文件夹下创建index.js即:src/filters/index.js2、在main.js中引入src/filters/index.js文件,并在下方遍历调用filters中的方法,使用VUE.filters切记:将遍历代码写在newVUE()上方3、在src/utils文件夹下的文件中创建各种工具类方法4、在src/filters/index.js中引入utils中的方法进行调用src

大家好,又见面了,我是你们的朋友全栈君。

统一封装规则

1、src文件夹下创建 filters文件夹,然后再filters文件夹下创建index.js
即:src/filters/index.js

2、在main.js中引入src/filters/index.js文件,并在下方遍历调用filters中的方法,使用VUE.filters
切记:将遍历代码写在new VUE()上方

3、在src/utils文件夹下的文件中创建各种工具类方法

4、在src/filters/index.js中引入utils中的方法进行调用

src/utils/index.js

/** * 数字/浮点数保留n位小数点 * @param {*} val 值 * @param {*} num 位数 */
export const numToFixed = (val = 0, num = 2) => { 
   
  val = Number(val)
  val = isNaN(val) ? 0 : val
  return val.toFixed(num)
}

src/filters/index.js

import * as index from '../utils/index'

/** * 数字/浮点数保留n位小数点 * @param {*} val 值 * @param {*} num 位数 */
export const numToFixed = (val = 0, num = 2) => index.numToFixed(val, num)

src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import * as filters from './filters'  // 点1

Vue.config.productionTip = false

Object.keys(filters).forEach(key => { 
    Vue.filter(key, filters[key]) }) // 点2,必须在new Vue之前

/* eslint-disable no-new */
new Vue({ 
   
  el: '#app',
  router,
  components: { 
    App },
  template: '<App/>'
})

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/143279.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 自然语言处理中的Attention机制总结[通俗易懂]

    自然语言处理中的Attention机制总结[通俗易懂]&amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;nbsp;在面试的过程中被问到了attention,原来虽然其实已经实际用过attention了,也知道个大概原理是加权求和,但是对于加权的具体方法以及权值得分的计算并不是很清晰,面试答的一般,正好最近实习的地方

    2022年7月24日
  • setAttribute改变属性,动态改变类

    setAttribute改变属性,动态改变类

    2022年2月22日
  • 利用ffmpeg将H264解码为RGB

    利用ffmpeg将H264解码为RGB由于公司买到了一个不提供解码器的设备,我不得已还要做解码的工作。在网上找了一圈,H264解码比较方便的也就是ffmpeg一系列的函数库了,原本设备中也是用这套函数库解码,但厂家不给提供,没办法,只得自己搞了。

    2022年6月23日
  • pycharm学生版更新license「建议收藏」

    pycharm学生版更新license「建议收藏」pycharm的学生license一年过期,需要更新license.看网上的po出的经验较少,即使有也有错误,前几天成功更新了,分享一下经验。1.首先登陆jetbrainshttps://www.jetbrains.com/zh-cn/2.使用学校邮箱登陆后查看license因为是前几天更新的所以这个截图是已经更新过的,如果是一年期license过期的话(就是validthrough日期已过),大概是红圈这个位置有一个绿色的“renew…”(具体内容不记得了)。3.点开后输入学校邮箱这时候

    2022年8月28日
  • 计算机等级二级java试题(计算机二级考试题库)

    第一章数据结构与算法【考点1】算法的基本概念1、算法:是指一组有穷的指令集,是解题方案的准确而完整的描述。算法不等于程序,也不等于计算方法。2、算法的基本特征:1)确定性,算法中每一步骤都必须有明确定义,不允许有多义性;2)有穷性,算法必须能在有限的时间内做完,即能在执行有限个步骤后终止;3)可行性,算法原则上能够精确地执行;4)拥有足够的情报。3、算法的组成…

    2022年4月10日
  • 手把手教你获取x信本地数据库(利用Sqlcipher查看)

    手把手教你获取x信本地数据库(利用Sqlcipher查看)最近一直在研究Xposed等一些hook框架,进行学习做一些demo,这次就正好拿x信练练手,学习学习,也可以学习x信手机本地数据库的表结构设计等。好,废话不多说,直接开干。前提是你的电脑已经安装了adb相关程序,如果你本身就是安卓开发者,想必肯定安装了AndroidStudio,那里直接就有adb相关程序。其次,你准备一台已经root过的安卓手机(要安装的有使用过的x信应用,不

    2022年10月22日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号