Vue中的过滤器使用说明

• 在Vue中可以使用Vue提供的Filter过滤器，对一些数据进行处理，但是其他的方法可以代替Filter过滤器，并且Vue在后面的版本可能会舍弃Filter过滤器，Vue官方建议使用computed来代替Filter，但是既然有，那就要说

• Vue中提供的过滤器

  • 全局过滤器 通过Vue.filter定义

    // 定义全局不重复过滤器
    Vue.filter('dealOverallFilter', function (value) {
      console.log(value); // 1644841090290
      return '使用的是全局过滤器';
    });
    
    // 定义全局和组件内重复过滤器
    Vue.filter('dealOverallFilterRepeat', function (value) {
      console.log(value, '全局重复过滤器');
      return '全局重复过滤器 - 全局';
    });
    	```
    

  • 局部过滤器

    	<template>
    	  <div>
    	    <h1>当前时间为：{{ nowTime }}</h1>
    	    <h1>使用 computed处理过后的时间：{{ computedTime }}</h1>
    	    <h1>调用方法处理过后的时间：{{ dealTime() }}</h1>
    	    <h1>使用过滤器处理后的时间：{{ nowTime | filterDeal }}</h1>
    	    <h1>
    	      使用过滤器处理后的时间[传递指定格式]：
    	      {{ nowTime | filterDealFormat('YYYY年MM月DD天') }}
    	    </h1>
    	    <h1>
    	      使用过滤器处理后的时间[二次处理]：
    	      {{ nowTime | filterDeal | filterDealBegin }}
    	    </h1>
    	    <h1>使用全局过滤器：{{ nowTime | dealOverallFilter }}</h1>
    	    <h1>使用全局过滤器：{{ nowTime | dealOverallFilterRepeat }}</h1>
    	  </div>
    	</template>
    	<script>
    	import dayjs from 'dayjs';
    	export default {
    	  data() {
    	    return {
    	      nowTime: new Date().getTime(),
    	    };
    	    // 使用computed来处理时间戳
    	  },
    	  computed: {
    	    // 定义计算属性去处理时间
    	    computedTime() {
    	      return dayjs(this.nowTime).format('YYYY-MM-DD HH:mm:ss');
    	    },
    	  },
    	  methods: {
    	    // 定义事件去处理时间
    	    dealTime() {
    	      return dayjs(this.nowTime).format('YYYY-MM-DD HH:mm:ss');
    	    },
    	  },
    	  filters: {
    	    // 过滤器不传递参数时 接受的第一个参数为过滤器需要过滤的值
    	    filterDeal(value) {
    	      return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
    	    },
    	
    	    // 过滤器传递参数时 接受的第一个参数为过滤器需要过滤的值，从第二个值开始为传递的参数
    	    filterDealFormat(value, str = 'YYYY-MM-DD HH:mm:ss') {
    	      return dayjs(value).format(str);
    	    },
    	
    	    // 多个过滤器并存的时候，前一个过滤器的返回值将作为下一个过滤器的参数进行传递
    	    filterDealBegin(value) {
    	      return value.split('-')[0];
    	    },
    	
    	    // 当全局和局部都有同名过滤器时，局部过滤器的权重大于全局过滤器的全局，因此局部过滤器将会覆盖掉全局过滤器
    	    dealOverallFilterRepeat() {
    	      return '全局重复过滤器 - 局部';
    	    },
    	  },
    	};
    	</script>
    

• 处理后的效果图

• 

• 局部过滤器和全局过滤器的区别

  • 全局过滤器需要在Vue被实例化之前挂载在Vue身上
  • 全局过滤器的命名如果和本地的局部的命名冲突了，局部的过滤器将覆盖掉全局的过滤器
  • 过滤器接受的第一个参数时处理的数据
  • 从第二个参数开始，为定义过滤器时传递的数据
  • 担当对一个数据定义多个过滤器的时候，前一个过滤器的返回值将会作为下一个过滤器的第一个参数进行传递