• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

关于Vue中过滤器的必懂小知识

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

大家好,今天来分享下Vue中的过滤器小知识

什么是过滤器

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

如何使用过滤器

全局过滤器

  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 }}

在 v-bind 中使用

      <h1>Vue过滤器</h1>
      <p :id="122 | capitalize"></p>

局部过滤器

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

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

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中过滤器必懂小知识的文章就介绍到这了,更多相关Vue过滤器小知识内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JS+Canvas实现动态时钟效果发布时间:2022-02-05
下一篇:
详细聊聊React源码中的位运算技巧发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap