×

Vue每日一学:分享vue过滤器的小知识

作者:天空2021.10.18来源:Web前端之家浏览:3912评论:0
关键词:vuejsvue过滤器

Vue每日一学:分享Vue过滤器的小知识。在Web前端开发中经常用到过滤器,所以大家需要熟悉掌握。

过滤器分为两种:全局过滤器和局部过滤器。我们用实例来说明下。

全局过滤器

  1. 本案例是过滤价格中的¥和元

  2. 示例 ¥1999.00元

  3. 定义一个capitalize方法,传入value值

  4. 如果value为空返回空字符串

  5. 否则就叠加字符串"¥" "元" ,这里的toFixed(2)四舍五入为指定小数位数

使用方法:

//main.js
Vue.filter("capitalize", function (value) {
  if (!value) return "";
  return "¥" + value.toFixed(2) + "元";
});

在双花括号中使用:

<!-- home.vue -->
<h1>Vue过滤器</h1>
<p>{{ price | capitalize }}</p>
{{ 20.6664376486 | capitalize }}

局部过滤器

这里注意下 当全局过滤器和局部过滤器重名时,会采用局部过滤器。

局部过滤器可以在一个组件的选项中定义本地的过滤器:

export default {
  name: 'index',
  data() {
    return {
      price: 1999
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      return '¥' + value.toFixed(2) + '元'
    }
  }
}

串联过滤器

在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。

{{ message | filterA | filterB }}

注意:

1、 当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!

2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

总结

关于vue中过滤器的小分享就这么多了,希望能帮助到大家。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20211018a1.html

网友评论文明上网理性发言 已有0人参与

发表评论: