VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • vue-cli 3 全局过滤器的实例代码详解

    在vue1.x版本里是自带里几个基础的过滤器的(虽然不怎么用到)。

    到了vue2.x版本之后,内置到几个过滤器就被删掉了,如果需要用到过滤器,就要开发者自己去定义。

    可以把过滤器定义在某个组件内部,但这样就成了局部过滤器,在别的组件里是无法使用的。所以通常不会这么做。

    也可以把过滤器写在main.js里。但如果项目中存在多个过滤器,这会使main.js文件看上去很庞大,不便于后期维护。

    所以通常会新建一个js文件,专门用来存放所有过滤器。最后再引到main.js中供全局使用。

    1、创建 filters.js

    首先新建一个filters.js文件。把这个文件放在 src/assets 里。

    因为这里是用来存放静态资源的。这个文件夹可以用来存放图片、css和部分自定义的功能的js资源。如果需要更好的分类,可以在 assets 文件夹里再创建 js 、 css 、 img 等文件夹。

    2、创建过滤器规则

    这里我创建了3个过滤器

    // 转小写
    let lower = value => value.toLowerCase();
    // 转大写
    let upper = value => value.toUpperCase();
    let currencyStyle = (value, style) => { // 货币格式
      /**
       * style: 
       *   currency:货币
       *   number: 数字格式
       */
      if(style == 'number') { // 数字格式
        return parseFloat(value.replace(/[^\d\.-]/g, ""));
      } else { // 货币格式, 并保留2位小数
        var n = 2;
        value = parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
        var l = value.split(".")[0].split("").reverse(),
          r = value.split(".")[1];
        var t = "";
        for (var i = 0; i < l.length; i++) {
          t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
        }
        return t.split("").reverse().join("") + "." + r;
      }
    }
    export {
      lower,
      upper,
      currencyStyle
    }

    3、在main.js里注册全局过滤器

    import Vue from 'vue'
    import App from './App.vue'
    import * as filters from './assets/filters'
    Object.keys(filters).forEach(key => {
     Vue.filter(key, filters[key])
    })
    Vue.config.productionTip = false
    new Vue({
     render: h => h(App),
    }).$mount('#app')

    通过 forEach 循环,把自定义功能分别注册到过滤器里。

    4、在组件里使用

    <template>
     <div id="app">
      <p>{{ num1 | currencyStyle('currency') }}</p>
      <p>{{ num2 | currencyStyle('number') }}</p>
      <p>{{ msg1 | lower }}</p>
      <p>{{ msg2 | upper }}</p>
     </div>
    </template>
    <script>
    export default {
     name: 'app',
     data() {
      return {
       num1: 123456,
       num2: '123,456',
       msg1: 'ABC',
       msg2: 'def'
      }
     }
    }
    </script>

    总结

    以上所述是小编给大家介绍的vue-cli 3 全局过滤器的实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • vue实现前台列表数据过滤搜索、分页效果
    • vue2 v-model/v-text 中使用过滤器的方法示例
    • vue中格式化时间过滤器代码实例
    • 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
    • Vue2.0 v-for filter列表过滤功能的实现
    • Vue 过滤器filters及基本用法
    • Vue数组更新及过滤排序功能
    • vue 的 solt 子组件过滤过程解析

    广而告之:
    热门推荐:
    babel之配置文件.babelrc入门详解

    介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 babel有提供专门的命令行工具方便转码,可以自行去了解 什么是Babel 官方解释,是下一代JavaScript 语法的编译器。 既然是下一代Javascript的标准,浏···

    织梦DEDECMS文章内容body图文分离调用代码

    织梦DEDECMS文章正文调用代码为{dede:field.body/},这样图片和文章都调用出来了。能不能分开调用呢?当然可以啦!调用 代码如下 内容文字 <div> {dede:field.body runphp=yes} $string = @me; $result = preg_replace("/<s{0,}img[^>]+>/i&quo···

    你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)

    Vue作为最近最炙手可热的前端框架,其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就···

    PHP结合JQueryJcrop实现图片裁切实例详解

    我们经常可以看到一些网站上有图片剪切的功能,或许你会觉得这一功能炫目华丽,神秘莫测!但是今天介绍的一款专用于图片裁切的插件jquery.Jcrop.min.js就将揭开图片剪切的神秘面纱。使用这个插件可以很方便的实现这一功能,使用时仅需鼠标在图片上圈选出选区,即可把图片裁切成···

    PHP批量生成缩略图的代码

    缺点:长宽不一的图片会被拉伸变形,不能智能裁切,需要智能裁切的,请自行研究。<?php  $config = array();  $config['path'] = "./";  $config['t_width'] = 120;  $config['t_height'] = 98;  $···

    Vue CL3 配置路径别名详解

    Cli3工具中,配置路径别名 最近用Vue Cli3脚手架搭建了Vue项目,发现没有build目录了,里面的webpack相关的也没了,看了官方文档后,查了资料后,发现都在vue.config.js里来配置了 配置路径别名,方便引用,不用写那么长 配置前: import TodoList from '../../components/To···

    JavaScript变量类型以及变量作用域详解

    变量类型 ECMAScript变量可能包含两种不同类型的数据值:基本类型和引用类型。 基本类型 基本类型指的是简单的数据段,5种基本数据类型:undefined、null、boolean、number、string,基本数据类型是按值访问的,因此可以操作保存在变量中的实际的值。 复制变量值 从一个变量向···

    DEDECMS织梦修改member会员中心文件夹名称 更改member目录名称

    DEDECMS做站过程中有时候不可避免被各种营销软件强行发布广告,因此为了避免这个情况,我们要嘛是加强注册审核,要嘛就是参考我们这篇文章,将会员中心文件夹完全改名,避免被特征扫描到。 下面是操作方法: 1、首先进入FTP将你的member文件夹,更名比如更名为user···

    HTML表格标记教程(30):单元格的暗边框色属性BORDERCOLORDARK

    在单元格中,可以单独定义暗边框色。 基本语法 <TD Bordercolodark=color_VALUE> 语法解释 定义颜色的时候,可以使用英文颜色名称或十六进制颜色值表现。 文件范例:10-28.htm 设定单元格暗边框的颜色。01 <!-- ------------------------------ -->02 <!-- 文件···

    织梦dedecms导航栏栏目被选中状态

    很多新手朋友在用织梦dedecms 做仿站时,经常问怎样实现导航栏被选中的样式,即当在首页时导航栏的“首页”就处 。   于选中状态,如下图: 图1     当在别的栏目时,导航栏中“首页”就不处于选中,所在栏目处于被选中状态···