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


相关推荐

  • linux中zip文件解压命令,Linux中zip压缩和unzip解压缩命令使用方法

    linux中zip文件解压命令,Linux中zip压缩和unzip解压缩命令使用方法Linux继承了Unix以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。在Linux中,我们可以利用命令进行文件压缩,即zip压缩和unzip解压缩,这篇文章主要介绍了详解Linux中zip压缩和unzip解压缩命令及使用详解,本文给大家介绍的非常详细,需要的朋友可以参考下下面给大家介绍下Linux中zip压缩和unzip解压缩命令详解1、把/home目录下面的mydata目录压缩为m…

    2022年6月7日
    56
  • 笔记:网络基础TCP、HTTP、HTTPS(HTTP+SSL)

    笔记:网络基础TCP、HTTP、HTTPS(HTTP+SSL)

    2021年6月21日
    115
  • phpstorm激活码2022(注册激活)

    (phpstorm激活码2022)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月27日
    10.3K
  • j2EE是什么_J2EE全称

    j2EE是什么_J2EE全称J2EE(即Java2平台企业版)是由Sun公司主持推出的一项中间件技术。从CORBA、IDL到面向消息的系统,中间件技术已经走过了很长的一段路程,如今J2EE作为中间件技术史上的一块具有决定意义的里程碑,正受到业界越来越广泛的重视和采纳。J2EE,一方面有着一套相当庞大的标准体系和数个不同版本,另一方面,由于市场上应用服务器品种多样,各家开发商使用的术语又不尽相同,因此,围绕着J2EE,常

    2022年10月11日
    0
  • 公有云和私有云的区别 如何搭建云存储

    公有云和私有云的区别 如何搭建云存储云存储这样的隐喻或许感觉会有些夸张,但我们从中仍能感觉到和云相关的模糊的概念,对于这项技术的未来也是充满了未知,这对我们熟知的私有云存储也是一样。虽然市场上各种宣传的私有云存储都声称自己受益于在原有公有云上增加了防火墙,然而却有迹象表明私有云存储的名声却逐渐降到公共存储之下。说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此…

    2022年6月17日
    41
  • ORM学员管理系统

    1.使用MySQL自己创建一个数据库,以下例为例2.在项目的settings.py文件中进行数据库链接信息3.在项目下的__init__文件中写入以下命令4.在项目下的models.py文件中创

    2022年3月29日
    34

发表回复

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

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