唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > Vue.js的过滤器基本使用

Vue.js的过滤器基本使用

2019-02-15 分类:Vue.js专区 作者:管理员 阅读(2260)

过滤器的介绍

  • 1、在Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式。
  • 2、首先我们要知道,Vue中的过滤器不能替代Vue中的methods、computed或者watch,但有时候他们都可以达到同样的目的
  • 3、过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。
  • 4、在很多不同的情况下,过滤器都是有用的,比如尽可能保持API响应的干净,并在前端处理数据的格式。
  • 5、在你希望避免重复和连接的情况下,它们也可以有效地封装成可重用代码块背后的所有逻辑。
  • 6、在Vue 2.0中已经没有内置的过滤器了,我们可以自定义过滤器。2.0之前有。在这里有一个旧的内置过滤器的完整列表
  • 定义和使用过滤器

    1.全局和本地过滤器:你可以跨所有组件访问全局过滤器,而本地过滤器只允许你在其定义的组件内部使用

    一:编辑过滤器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    /**
     * 给商品价格加补0
     * @param {*} value
     */

    const addZero=function(value){
        var value=Math.round(parseFloat(value)*100)/100;
        var xsd=value.toString().split(".");
        if(xsd.length==1){
            value=value.toString()+".00";
            return value;
        }
        if(xsd.length>1){
            if(xsd[1].length<2){
                value=value.toString()+"0";
            }
            return value;
        }
    }
    export default {
        addZero
    }

    二,在入口文件中引入这个filter文件 (路径以你自己的为准)

    1
    import filters from '../../../static/filter/filter';

    三,在入口文件中全局注册filter

    1
    2
    3
    4
    //过滤器统一处理加载
    Object.keys(filters).forEach(key => {  
      Vue.filter(key, filters[key])  
    })

    组件中使用

    1
    {{content | addZero}}

    本过过滤器

    本地过滤器被注册到一个Vue组件中。下面这个示例展示了本地过滤器是如何创建的。这个过滤器的功能是将字母变成大写,本地过滤器存储在Vue组件中,作过filters属性中的函数。这个时候你想注册多少个就能注册多少个:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    let app = new Vue({
      el: '#app',
      data () {
        return {
          name: 'w3cplus.com'
        }
      },
      // 声明一个本地的过滤器
      filters: {
        Upper: function (value) {
          return value.toUpperCase()
        }
      }
    })
    <div id="app"> <h1>{{ name | Upper }}</h1> </div>

    过滤器串连、传参

    关于过滤器,我最喜欢的一件事是能够使用管道(|)符号对它们进行串连,并通过一系列过滤器转换一个值。让我们再看一个价格的例子,并让这个价格只保留两位小数,然后加上美元符号。虽然我们可以使用一个单独的过滤器来实现它,但我们也可能想要使用toUSD过滤器。在这种情况下,分离和串连过滤器是一处方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    Vue.filter('toFixed', function (price, limit) {
         return price.toFixed(limit)
     })
    Vue.filter('toUSD', function (price){
         return `$${price}`
    })
    let app = new Vue({
        el: '#app',
        data () {
            return {
                price: 435.333
            }
        }
    })
    <div id="app">
        <h1>
            {{ price | toFixed(2) | toUSD }}
        </h1>
    </div>

    传参数时候,过滤器第一位默认是value,也就是说形参第二位才是接收参数。当然,过滤器它的功能仅仅不像文章中的这么简单,他可以做任何你想做的事情。如果你对Vue其他的自定义过滤器功能感兴趣的话,可以阅读@wy-ei在Github上创建的Vue过滤器集合

    「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

    赞(2) 打赏

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    2

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    标签:

    上一篇:

    下一篇:

    你可能感兴趣

    共有 0 条评论 - Vue.js的过滤器基本使用

    博客简介

    唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

    精彩评论

    友情链接

    他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

    站点统计

    • 文章总数: 243 篇
    • 草稿数目: 0 篇
    • 分类数目: 15 个
    • 独立页面: 6 个
    • 评论总数: 905 条
    • 链接总数: 14 个
    • 标签总数: 433 个
    • 建站时间: 1067 天
    • 注册用户: 3709 人
    • 访问总量: 8696431 次
    • 最近更新: 2019年11月14日
    服务热线:
     173xxxx7240

     QQ在线交流

     旺旺在线