Vue filter介绍及详细使用

Vue filter介绍及详细使用攻略

1. 什么是Vue filter

Vue filter是Vue的一个功能，在Vue组件模板中使用{{ someData | filterName }}的方式，可以对一些字符串、数字、日期等进行处理，返回新的字符串、数字、日期等内容。可以用于格式化展示数据、处理一些业务逻辑等。

2. 如何定义Vue filter

在Vue实例中的filters属性中，可以定义需要使用的filter。如下示例是定义一个将数字保留两位小数的filter：

Vue.filter('toFixedTwo', function(value) {
  return Number(value.toFixed(2));
})

这里定义了一个名为toFixedTwo的filter，接收一个数字参数value，将其保留两位小数后返回。

3. 如何在Vue模板中使用Vue filter

在Vue组件模板中使用pipe符号将需要处理的数据与filter名隔开，即可使用Vue filter。下面示例是在模板中使用上面定义的toFixedTwo filter。

<template>
  <div>{{ price | toFixedTwo }}</div>
</template>

<script>
export default {
  data() {
    return {
      price: 42.1234
    }
  }
}
</script>

执行上面的代码，组件会渲染出<div>42.12</div>的内容。

4. Vue filter的使用场景

Vue filter可以用于对一些字符串、数字、日期等进行处理，返回新的内容，在显示数据的时候更符合需求，如金额的格式化展示、时间的格式化展示等。

下面是使用Vue filter对日期进行格式化展示的示例：

Vue.filter('dateFormat', function(date, format = 'YYYY-MM-DD HH:mm:ss') {
  return moment(date).format(format)
})

<template>
  <div>{{ createAt | dateFormat }}</div>
</template>

<script>
import moment from 'moment'

export default {
  data() {
    return {
      createAt: '2022-01-01 12:12:12'
    }
  }
}
</script>

使用moment.js库对日期进行处理，定义了一个名为dateFormat的filter，可传入日期与格式化字符串两个参数，将日期进行格式化展示。

执行上面的代码，组件会渲染出<div>2022-01-01 12:12:12</div>的内容。

5. 结语

以上是关于Vue filter的简单介绍及详细使用攻略。在项目中，使用Vue filter可以简化一些模板中需要处理的数据的复杂逻辑，让模板更加简洁，维护更加方便。