显式将Vue筛选器导入组件

// filters.js

// 自定义筛选器：将字符串转换为大写
export function uppercase(value) {
  return value.toUpperCase();
}

// 自定义筛选器：将字符串截取前n个字符
export function truncate(value, length) {
  if (value.length > length) {
    return value.substring(0, length) + '...';
  }
  return value;
}

// MyComponent.vue

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

<script>
import { uppercase, truncate } from './filters';

export default {
  filters: {
    uppercase,
    truncate
  },
  data() {
    return {
      message: 'Hello World',
      description: 'This is a long description'
    };
  }
};
</script>