详解Vue串联过滤器的使用场景


Posted in Javascript onApril 30, 2020

平时开发中,需要用到过滤器的地方有很多,比如单位转换、数字打点、文本格式化等,比如:

Vue.filter('toThousandFilter', function (value) {
 if (!value) return ''
 value = value.toString()
 return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,')
})

实现效果:

30000 => 30,000

当然这只是常规用法,没什么好说的。下面来说一个我在开发中遇到的一个需要用到串联过滤器的使用场景。

假设需要获取一个订单列表,其中的每一项的 status 字段用来表示订单状态:        

{
      id: '',
      order_num: '123456789',
      goodList: [ ... ],
      address: { ... },
      status: 1 // 1 待付款 2 待发货 3 待收货
     }

那我们拿到这个数据在,v-for 的时候,肯定会这样做:

<template>
  <!-- ... -->
  <span class="order_status">{{ orderItem.status | getOrderStatus }}</span>
  <!-- ... -->
</template>
<script>
 export default {
  // ...
  filters: {
    getOrderStatus(status) {
      switch (status.toString()) {
        case '1':
          return '待付款';
        case '1':
          return '待发货';
        case '1':
          return '待收货';
        default:
          return '';
      }
    }
  }
  // ...
 }
</script>
<style scoped type="scss">
  // ...
  .order_status {
    font-size: 14px;
  }
  // ...
</style>

这样,表示状态的 1, 2, 3 就变成了 待付款,待发货,待收货。这没有什么问题。但是,需求来了,当订单未付款时,表示状态的文字应该为红色。就是当状态为 待付款 时,文字要为红色!这个问题曾经困扰了有一段时间,用了各种办法,虽然也是实现了需求,但终归不太优雅。直到最近在翻看 vue 文档,才想起来有串联过滤器的用法,可以完美解决这个需求,上码:

<template>
  <!-- ... -->
  <span class="order_status" :class="orderItem.status | getOrderStatus | getOrderStatusClass">{{ orderItem.status | getOrderStatus }}</span>
  <!-- ... -->
</template>
<script>
 export default {
  // ...
  filters: {
    getOrderStatus(status) {
      switch (status.toString()) {
        case '1':
          return '待付款';
        case '1':
          return '待发货';
        case '1':
          return '待收货';
        default:
          return '';
      }
    },
    getOrderStatusClass(status) {
      if (status === '待付款') {
        return 'not-pay'
      }
      return ''
    }
  }
  // ...
 }
</script>
<style scoped type="scss">
  // ...
  .order_status {
    font-size: 14px;
    &.not-pay {
      color: red;
    }
  }
  // ...
</style>

就这么简单。

关于过滤器,这里还有几点要注意的:

  • 过滤器必须是个纯函数
  • 过滤器中拿不到 vue 实例,这是 vue 故意这么做的
  • 在全局注册过滤器是用 Vue.filter(),局部则是 filters: {}
  • 在方法中调用过滤器方法为: this.$options.filters.XXX

到此这篇关于详解Vue串联过滤器的使用场景的文章就介绍到这了,更多相关Vue串联过滤器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
详解javascript new的运行机制
Jan 26 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
原生js实现简单轮播图
Oct 26 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 #Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 #jQuery
Vue发布订阅模式实现过程图解
Apr 30 #Javascript
Javascript异步执行不按顺序解决方案
Apr 30 #Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 #Javascript
JavaScript自定义超时API代码实例
Apr 30 #Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 #Javascript
You might like
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php 页面执行时间计算代码
2008/12/04 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
php二维码生成以及下载实现
2017/09/28 PHP
php DES加密算法实例分析
2019/09/18 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
详解React中setState回调函数
2018/06/14 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python中upper是做什么用的
2020/07/20 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
学校安全生产承诺书
2014/05/23 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript