vue filter用法

Vue中的filter可以用于对数据进行格式化和处理，常用于将数据转换为特定格式或者进行一些简单的计算。以下是Vue filter的几种用法：

1. 单独在组件或页面中使用filter：

<template>
  <div>
    <p>{{ message | capitalize }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  filters: {
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}
</script>

2. 在全局中注册filter：
在main.js中引入filters.js文件，对该文件下的所有过滤器统一注册，这样以后新增过滤器时只需要将过滤器添加在filters.js中，无需每次都去main.js中注册。同时也方便过滤器的统一管理和修改。

// filters.js
export default {
  capitalize(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  },
  // 其他过滤器
}

// main.js
import Vue from 'vue'
import filters from '@/common/filters/filters.js'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

3. filter可传递自定义参数：

<template>
  <div>
    <p>{{ message | truncate(10) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  filters: {
    truncate(value, length) {
      if (!value) return ''
      value = value.toString()
      if (value.length > length) {
        return value.slice(0, length) + '...'
      } else {
        return value
      }
    }
  }
}
</script>