详解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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
JavaScript 函数调用规则
Sep 14 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 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
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
php实现等比例压缩图片
2018/07/26 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
PHP中16个高危函数整理
2019/09/19 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JS中的作用域链
2017/03/01 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python 标准差计算的实现(std)
2019/07/29 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
青蓝工程实施方案
2014/03/27 职场文书
2014年计生标语
2014/06/23 职场文书
教师求职自荐信范文
2015/03/04 职场文书
班主任自我评价范文
2015/03/11 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
早会开场白台词大全
2015/06/01 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang