学习笔记03 - vue过滤器

vue过滤器

用于格式化一些数据，比如英文转换大小写，价格转换小数点后两位格式

可以全局注册/局部使用

示例(全局注册)

datetime不足两位补0

import Vue from 'vue'

/**
 * 时间数据处理
 */
Vue.filter('filterTime', function (value) {
  if (!value) return ''

  if (value.indexOf(':') === -1) return value

  let result = ''
  const arr = value.split(':')

  // 时
  if (parseInt(arr[0]) < 10) {
    result = '0' + arr[0]
  } else {
    result = arr[0]
  }

  // 分
  if (parseInt(arr[1]) < 10) {
    result = result + ':0' + arr[1]
  } else {
    result = result + ':' + arr[1]
  }

  // 秒
  if (parseInt(arr[2]) < 10) {
    result = result + ':0' + arr[2]
  } else {
    result = result + ':' + arr[2]
  }

  return result
})

 

示例(局部注册）

放在某个组件文件内

filters: {
    filterTime: function (value) {
      if (!value) return ''

      if (value.indexOf(':') === -1) return value

      let result = ''
      const arr = value.split(':')

      // 时
      if (parseInt(arr[0]) < 10) {
        result = '0' + arr[0]
      } else {
        result = arr[0]
      }

      // 分
      if (parseInt(arr[1]) < 10) {
        result = result + ':0' + arr[1]
      } else {
        result = result + ':' + arr[1]
      }

      // 秒
      if (parseInt(arr[2]) < 10) {
        result = result + ':0' + arr[2]
      } else {
        result = result + ':' + arr[2]
      }

      return result
    }
  },

写好过滤器后使用：

<!-- 在双花括号中 -->
{{ message | filterTime}}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | filterTime"></div>

多过滤器使用：

{{ message | filterA | filterB }}  message 传给A, A过滤后作为参数传给B

参考资料：

https://www.jianshu.com/p/ad21df1914c5

https://cn.vuejs.org/v2/guide/filters.html