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


相关推荐

  • mysql卸载与安装_cad卸载后无法重新安装

    mysql卸载与安装_cad卸载后无法重新安装以Windows10操作系统为例:一、先看看如何卸载1、首先,停止window的MySQL服务,【windows键+R】打开运行框,输入【services.msc】打开(或者找到“控制面板”->“管理工具”->“服务”,停止MySQL后台服务)服务管理器,停止MySQL后台服务。2、卸载MySQL安装程序。找到“控制面板”->”程序…

    2022年9月30日
    3
  • js常见问题

    js常见问题

    2021年6月30日
    73
  • vue.cli项目封装全局axios,封装请求,封装公共的api和调用请求的全过程[通俗易懂]

    vue.cli项目封装全局axios,封装请求,封装公共的api和调用请求的全过程[通俗易懂]vue项目的前期配置封装axios实例封装API

    2022年6月11日
    28
  • Leetcode 差分数组的应用「建议收藏」

    Leetcode 差分数组的应用「建议收藏」题目1解法这个题目普通解法参见这里不过这里面的做法都是nlog(n)的。实际上利用差分数组,这道题目可以有O(n)做法这边简单提一下差分序列,对于一个数组,差分序列的定义是数组中前一个值和后一个值的差值形成的新数组。我们在原数组某个区间加上一个统一的值,正常的做法需要在原数组每个位置去叠加,而体现在差分数组上只需要对区间两端的值进行变化即可,差分数组的prefixsum其实就是原数组。比如原数组为:num=[1,1,1,2,2,3]差分数组为:diff_num=[1,0,0,1,0,

    2022年6月3日
    36
  • 《这是全网最硬核redis总结,谁赞成,谁反对?》六万字大合集

    后端需要知道的关于redis的事,基本都在这里了。此文后续会改为粉丝可见,所以喜欢的请提前关注。你的点赞和评论是我创作的最大动力,谢谢。《三天给你聊清楚redis》第1天先唠唠redis是个啥(18629字)一、入门Redis是一款基于键值对的NoSQL数据库,它的值支持多种数据结构:字符串(strings)、哈希(hashes)、列表(lists)、集合(sets)、有序集合(sortedsets)等。•Redis将所有的数据都存放在内存中,所以它的读写性能十分惊人,.

    2022年4月9日
    45
  • ValidateRequest 属性[通俗易懂]

    ValidateRequest 属性[通俗易懂]               在ASP.NET1.1中,@Page指令上的ValidateRequest属性被打开后,将检查以确定用户没有在查询字符串、Cookie或表单域中发送有潜在危险性的HTML标记。如果检测到这种情况,将引发异常并中止该请求。该属性默认情况下是打开的;您无需进行任何操作就可以得到保护。如果您想允许HTML标记通过,必须主动禁用该属性。  Valida

    2022年6月10日
    30

发表回复

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

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