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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • BIOS和EC

    BIOS和EC08年做MID时候的一个PPT.Agenda硬件平台BIOS介绍功能类型,种类内部模块(AWARD为例)EC介绍功能(IT8511ELPCEC为例)EC与BIOS关系硬件平台BIOS介绍BIOS(BasicInputOutputSystem)即基本输入/输出系统。存放在一个不需要电源的记忆体(芯片)中,这就

    2022年7月20日
    42
  • 321_MediaType Media Type 是什么

    321_MediaType Media Type 是什么MediaType是什么MediaType在网络协议的消息头里面叫做Content-Type使用两部分的标识符来确定一个类型所以我们用的时候其实就是为了表明我们传的东西是什么类型比如application/json:JSON格式的数据,在RFC4627中定义application/javascript:JavaScript,在RFC4329中定义但是…

    2022年5月9日
    81
  • html空格代码是什么?html中空格怎么打「建议收藏」

    html空格代码是什么?html中空格怎么打「建议收藏」html空格代码是什么?html中空格怎么打?对于刚刚入门的新手来说可能比较陌生,下面我们来总结一下html空格代码。打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)一:html空格代码是什么说到html空格代码很多人都会想到&nbsp,其实这也是表示html空格的一种方法,当我们输入十个&nbsp就表示有十个空格,然而在现实中,也有很多人认为html空格就是在html中输入几个空格键,如果是单纯的输入空格键,也是可以起到空格的效果.

    2022年9月22日
    1
  • linux用命令dpkg,Linux中dpkg命令起什么作用呢?

    linux用命令dpkg,Linux中dpkg命令起什么作用呢?摘要:下文讲述Linux中dpkg的功能说明,如下所示;dpkg是(Debianpackage英文的缩写)dpkg命令功能:用于管理DebianLinux中的包管理(安装,创建,管理软件)的一种实用性工具dpkg命令的语法格式:dpkg[参数]—–常用参数说明——-i:安装软件包-r:删除软件包-l:输出已安装软件包列表-L:输出于软件包关联的文件-c:输出软件包内文件列表–…

    2022年5月21日
    40
  • android autosize原理,Android屏幕适配头条:autosize的原理

    android autosize原理,Android屏幕适配头条:autosize的原理主要是固定一个UI尺寸,比如宽度360,然后为了各个density显示的宽度都是360dp,则通过:px=dp*density,density=screenWidthPx/360;记录下文章https://blankj.com/2018/07/30/easy-adapt-screen/我们知道px=dp*density,我们要适配的话需要确保dp不变去修改densit…

    2022年6月5日
    33
  • leetcode题目分类_leetcode组合总和

    leetcode题目分类_leetcode组合总和原题链接编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀,返回空字符串 “”。示例 1:输入:strs = [“flower”,”flow”,”flight”]输出:”fl”示例 2:输入:strs = [“dog”,”racecar”,”car”]输出:””解释:输入不存在公共前缀。 提示:0 <= strs.length <= 2000 <= strs[i].length <= 200strs[i] 仅由小写英文字母组成题解分

    2022年8月8日
    8

发表回复

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

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