当前位置: 首页 > 编程笔记 >

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

柳英资
2023-03-14
本文向大家介绍详解Vue串联过滤器的使用场景,包括了详解Vue串联过滤器的使用场景的使用技巧和注意事项,需要的朋友参考一下

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

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串联过滤器内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库! 

 类似资料:
  • 本文向大家介绍详解AngularJS过滤器的使用,包括了详解AngularJS过滤器的使用的使用技巧和注意事项,需要的朋友参考一下 AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写。 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如,假设我们希望将字符串 转换成大写,可以对字符串中的每个字符都单独进行转换操作,也可以使用过滤器: {{

  • 本文向大家介绍AngularJS中的过滤器使用详解,包括了AngularJS中的过滤器使用详解的使用技巧和注意事项,需要的朋友参考一下 过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。  小写过滤器 添加小写的过滤器,使用管道符的表达式。在这里添加小写过滤器,以小写字母打印学生姓名。 货币滤波器 加币过滤器使用管道符返回数的表达式。在这里,我们添加了过

  • 本文向大家介绍如何换个角度使用VUE过滤器详解,包括了如何换个角度使用VUE过滤器详解的使用技巧和注意事项,需要的朋友参考一下 前言 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作。官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已。但最近在做两款APP时,遇到一些特殊的需求。然后就对vue中的filter一些用法结合源码好好的梳理了下。下边我们以一个日期格式化展开讨

  • 本文向大家介绍详解AngularJS中$filter过滤器使用(自定义过滤器),包括了详解AngularJS中$filter过滤器使用(自定义过滤器)的使用技巧和注意事项,需要的朋友参考一下 1.内置过滤器 2.自定义过滤器     套用上面的格式定义两个简单的自定义过滤器一个带条件的,一个不带条件的。 (1)【不带条件】,功能:固定转换(有时候项目中会遇到角色代号,门店编码什么的,但是显示的时候

  • 一、HBase过滤器简介 Hbase 提供了种类丰富的过滤器(filter)来提高数据处理的效率,用户可以通过内置或自定义的过滤器来对数据进行过滤,所有的过滤器都在服务端生效,即谓词下推(predicate push down)。这样可以保证过滤掉的数据不会被传送到客户端,从而减轻网络传输和客户端处理的压力。 二、过滤器基础 2.1 Filter接口和FilterBase抽象类 Filter 接口

  • 1. 前言 本小节我们将学习如何使用过滤器。包括如何注册过滤器、过滤器的使用、过滤器的串联、过滤器的传参。过滤器的使用非常简单,同学们只需要多写几个例子就可以完全掌握。 2. 慕课解释 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。 — 官方定义 过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。过