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/>'
})

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • LaTex 论文排版(1): Win10 下 LaTex所需软件安装 (Tex live 2018 + Tex studio)

    LaTex 论文排版(1): Win10 下 LaTex所需软件安装 (Tex live 2018 + Tex studio)目录一、LaTex简介(1)百度百科(2)其他理解二、LaTex环境配置(LaTex排版所需要安装的软件)1Texlive安装(1)离线安装(2)在线安装2Texstudio安装(1)设置中文界面(2)添加行号参考资料一、LaTex简介论文投稿时,有的期刊要求用LaTex对论文进行排版,也有的期刊在投稿指南写接受LaTe…

  • idea设置删除一行快捷键_删除空白页快捷键

    idea设置删除一行快捷键_删除空白页快捷键IDEA删除当前一行快捷键默认是Ctrl+Y但是有时候会和反撤销键冲突,所以还是自己设置一下也可以自定义双击选中输入框,在键盘上按下ctrl+y就可以了。然后点击OK就可以了当然你也可以直接使用Ctrl+X剪切的快捷键,也是可以充当删除当前行的快捷键…

  • JS 显示时间与倒计时练习

    JS 显示时间与倒计时练习

  • abstract修改方法

    abstract修改方法

    2021年12月31日
  • CAS算法在Java中的应用

    CAS算法在Java中的应用参考上一篇文章的Java中LinkeList我们进行CAS的了解。Java语言中经常靠synchronized关键字保证同步的,这会导致有锁(也是我们经常所得重量级锁,因为其太过于繁重,所以才出现轻量级锁)。锁机制存在以下问题:(1)在多线程竞争下,加锁、释放锁会导致比较多的上下文切换和调度延时,引起性能问题。(2)一个线程持有锁会导致其它所有需要此锁的线程挂起。(3)如果一个…

  • ldap服务器签名要求修改,域控制器 LDAP 服务器签名要求

    ldap服务器签名要求修改,域控制器 LDAP 服务器签名要求你好,我们可以通过以下方法查看签名要求是否打开着:在DC中打开默认域策略(defaultdomainpolicy),展开目录:计算机配置>策略>windows设置>安全设置>本地策略>安全选项,在右侧的策略中有一条策略为“Domaincontroller:LDAPserversigningrequirements”由于我的环境中只有英文的系统,所以…

发表回复

您的电子邮箱地址不会被公开。

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