过滤器filters

在Vue项目中，src 文件夹下的 filter 文件夹通常用于存放全局过滤器（filters）。过滤器是一种在模板中对数据进行格式化处理的机制。Vue.js 提供了一种简洁的方式来定义和使用过滤器，可以在模板中直接应用于数据绑定和插值表达式。

过滤器的作用

过滤器主要用于对数据进行格式化处理，常见的用途包括：

1. 日期格式化：将日期对象转换为特定格式的字符串。
2. 文本格式化：将文本转换为大写、小写、首字母大写等。
3. 数值格式化：将数值转换为货币格式、百分比格式等。
4. 字符串截取：限制字符串长度，超出部分用省略号表示。

示例

假设你在 src/filter 文件夹中定义了一些过滤器，下面是一个简单的示例：

src/filter/index.js

// src/filter/index.js

// 导入所有过滤器
import capitalize from './capitalize';
import currency from './currency';
import date from './date';
import limitText from './limitText';

// 导出所有过滤器
export default {
  capitalize,
  currency,
  date,
  limitText
};

src/filter/capitalize.js

// src/filter/capitalize.js

export default function capitalize(value) {
  if (!value) return '';
  return value.charAt(0).toUpperCase() + value.slice(1);
}

src/filter/currency.js

// src/filter/currency.js

export default function currency(value) {
  if (!value) return '';
  return `$${value.toFixed(2)}`;
}

src/filter/date.js

// src/filter/date.js

export default function date(value) {
  if (!value) return '';
  return new Date(value).toLocaleDateString();
}

src/filter/limitText.js

// src/filter/limitText.js

export default function limitText(value, length) {
  if (!value) return '';
  return value.slice(0, length) + (value.length > length ? '...' : '');
}

注册过滤器

在 Vue 项目的入口文件（通常是 main.js）中注册这些过滤器：

src/main.js

import Vue from 'vue';
import App from './App.vue';
import filters from './filter';

// 注册所有过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});

new Vue({
  render: h => h(App),
}).$mount('#app');

使用过滤器

在 Vue 组件的模板中使用过滤器：

src/components/ExampleComponent.vue

<template>
  <div>
    <p>原始文本：{{ message }}</p>
    <p>首字母大写：{{ message | capitalize }}</p>
    <p>货币格式：{{ price | currency }}</p>
    <p>日期格式：{{ date | date }}</p>
    <p>限制长度：{{ longText | limitText(10) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world',
      price: 1234.56,
      date: '2023-10-01T00:00:00Z',
      longText: '这是一个很长的文本，需要被截断'
    };
  }
};
</script>

总结

src/filter 文件夹用于存放全局过滤器，这些过滤器可以在整个项目中复用，用于对数据进行格式化处理。通过在 main.js 中注册这些过滤器，你可以在任何组件的模板中方便地使用它们。这种方式不仅提高了代码的可读性和可维护性，还使得数据格式化逻辑更加集中和统一。