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


相关推荐

  • CAP以及分区容错性的含义「建议收藏」

    CAP以及分区容错性的含义「建议收藏」一个分布式系统里面,节点组成的网络本来应该是连通的。然而可能因为一些故障,使得有些节点之间不连通了,整个网络就分成了几块区域。数据就散布在了这些不连通的区域中。这就叫分区。当你一个数据项只在一个节点中保存,那么分区出现后,和这个节点不连通的部分就访问不到这个数据了。这时分区就是无法容忍的。提高分区容忍性的办法就是一个数据项复制到多个节点上,那么出现分区之后,这一数据项就可能分布到各个区里。容忍性就提高了。然而,要把数据复制到多个节点,就会带来一致性的问题,就是多个节点上面的数据可能是不一致的。要

    2022年7月25日
    13
  • 安卓开发个人小作品(3) – 多功能音乐播放器[通俗易懂]

    安卓开发个人小作品(3) – 多功能音乐播放器[通俗易懂]这次介绍一个多功能音乐播放器,记得是大二那年寒假写的,实现的主要功能就是音乐播放,带进度条控制,扫描本地音乐,上一曲下一曲,播放类型(单曲循环,顺序播放,随机播放),APP主题换肤,背景图更换等,功能都比较基础,基本上如果你不会的话,跟着我的思路,应该都是能实现的,预计会在以后加入歌词的功能。在开始前,先放一张最后的效果图吧,我个人喜欢的风格,简约,美观。目录1.实现扫描本地音乐…

    2022年6月26日
    30
  • 微信小程序php后端搭建_微信小程序访问服务器

    微信小程序php后端搭建_微信小程序访问服务器    在去年的时候,参加过学校的一个创业活动,在团队决定做一个关于图书的微信小程序以后,我负责做微信小程序的后台程序,因为初次接触,决定选用较为简单的PHP作为后台语言,实现了微信小程序的一些基本功能,例如对微信前段来的图片文字进行存储,或者接收到前端传来的关键字对服务器里的数据进行查询并返回前端,利用前端传来图书的ISBN码调用第三方豆瓣图书接口进行图书信息查询,最后还有比较难实现的微信支付功…

    2022年9月17日
    2
  • awk 数组排序多种实现方法「建议收藏」

    awk 数组排序多种实现方法「建议收藏」由于awk数组,是关联数组。for…in循环输出时候,默认打印出来是无序数组。 [chengmo@localhost~]$awk’BEGIN{info=”thisisatest”;split(info,tA,””);for(kintA){printk,tA[k];}}’4test1this2is3a 如果需要按照顺序输出,通过

    2022年7月19日
    16
  • linux调度器源码分析 – 概述(一)

    linux调度器源码分析 – 概述(一)

    2022年3月13日
    30
  • 数组splice_数组concat方法

    数组splice_数组concat方法有三个方法经常会混淆,但是了解它后你会发现很好区分splice方法是数组特有的方法spite方法是字符串特有的方法slice方法是字符串和数组共同都有的方法这里介绍下数组的常用方法数组的splice方法splice()函数用于从当前数组中移除一部分连续的元素。如有必要,还可以在所移除元素的位置上插入一个或多个新的元素。该函数以数组形式返回从当前数组中被移除的元素。该…

    2022年9月25日
    2

发表回复

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

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