vue2中使用filter的几种方式

目录

• 使用vue.filter建立全局定义
• 建立单独的filter模块并导出
• 局部使用，在各个组件当中进行定义

使用vue.filter建立全局定义

Vue.filter('filterByValue', function(value, search) {
  if (!search) {
    return value;
  }
  return value.filter(item => item.includes(search));
});

建立单独的filter模块并导出

const myFilter = {
  install(Vue, options) {
    Vue.filter('filterByValue', function(value, search) {
      if (!search) {
        return value;
      }
      return value.filter(item => item.includes(search));
    });
  }
};
// 注册过滤器
Vue.use(myFilter);

<template>
  <div>
    <p v-for="item in list | filterByValue('searchString')">{{ item }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'cherry'],
      searchString: 'ap'
    };
  }
};
</script>

局部使用，在各个组件当中进行定义

<template>
  <div>
    <p>{{ message | uppercase }}</p>
    <p>{{ amount | currency }}</p>
    <p v-bind:title="title | truncate(10)">{{ title }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!',
      amount: 1000,
      title: 'This is a long title that needs to be truncated'
    }
  },
  filters: {
    uppercase(value) {
      return value.toUpperCase();
    },
    currency(value) {
      return '$' + value.toFixed(2);
    },
    truncate(value, length) {
      if (value.length > length) {
        return value.substring(0, length) + '...';
      }
      return value;
    }
  }
}
</script>