交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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 子组件过滤过程解析

    广而告之:
    热门推荐:
    javascript 改变字体大小方法集合[原创]

    第一种方法: 分为 大 中 小 控制正文字体大小,一般需要指定 id #content {font-size:12px; line-height:200%; padding:10px; } 字体: 小中大 北冥有鱼 www.jb51.net 欢迎大家的光临。 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]第二种方法,用的不多,有特殊···

    HTML5仿微信聊天界面、微信朋友圈实例代码

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息、表情,发送的消息自动回滚定位到底部,另外可以对消息、图片、视频有不同的右键处理提示,还有打赏、占屏等操···

    初识JQuery 实例一(first)

    完整代码:复制代码 代码如下:<!DOCTYPE html> <html> <head> <style type="text/css"> .highlight { background-color: yellow; } .gray { background-color: Gray; } </style> <script src="http://code.jquery.com/jquery-1.5.js">···

    如何给网站部分链接设置绝对地址?

    绝对地址指的是包含域名的完整网址。有些网站程序或空间不方便设置301,为了实现首选域,可以给网站部分链接主导航或重要链接采用设置绝对地址的方式,同样也可以起到确定首选域的作用。

    jQuery JSON的解析方式分享

    等到问题解决了,也大致明白怎么个意思了,归根结底还是对jquery对相关json对象获取的理解有所偏差。 这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明。 这里首先给出JSON字符串集···

    Vue编写多地区选择组件

    看看效果图: 效果图 功能点: 支持不限城市,不限地区(这个东西的实现..真心死磕了挺久) – 左右两边数据的同步 地区一次性多选,若是选择了所有地区会自动转为不限地区 数据迁移箭头的判断..选中数据才会有对应的按钮可以点击 已选位置的数据同步响应调用的地方,当然也可以外部···

    Angular4开发解决跨域问题详解

    1.跨域 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同 同源策略: 请求的url地址,必须与···

    Vue分页器实现原理详解

    本文为大家讲解了Vue分页器实现原理,供大家参考,具体内容如下 网上搜的分页器大多是jQuery实现的,而且也不太完善,于是自己写了个分页器组件,以后再用也不慌,直接复制过去就ok,下面说说具体实现的代码和原理吧。 新闻组件template: <template> <div v-if="ne···

    Windows IIS PHP 5.2 安装与配置方法

    步骤一:下载php 5.2 for windows的安装包,解压至C:\php。注意此解压目录可以是在任何盘下,然而目录名不能包含空格; 以下是php5.2的文件目录: c:\php --dev | |-php5ts.lib --ext -- extension DLLs for PHP | |-php_bz2.dll | |-php_cpdf.dll | |-.. --extra···

    匹配yyyy-mm-dd日期格式的的正则表达式

    其实我也很头疼正则表达式,百度了一些资料,总结一下,这里留个备份吧。 要考虑的问题:合法的日期是多少;每个月的天数不一样;闰年的问题。。。。 1、合法的日期:MSDN上规定--在公元(基督纪元)0001 年 1 月 1 日午夜 12:00:00 到公元 (C.E.) 9999 年 12 月 31 日···