Vue2的过滤器你用过吗？

有jy一直在用这个吗？个人是从来没有过，时间久了我还以为是同事写的错误代码😳

过滤器，vue3已经删除，这个东西完全可以被方法替代，主要还是很不好用，个人感觉

官网解释

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

关键字：花括号，v-bind表达式才能用，其他位置没用

测试

<template>
  <div>
    <div>{{showValue}}</div>
    <div>{{showValue|filteTest}}</div>
    <FilterCom
      :value="showValue|filteTest"
    ></FilterCom>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  name: 'EmptyHome',
  components:{
    FilterCom:{
      props:{
        value:String,
      },
      render(createElement: CreateElement, context: RenderContext<any>): VNode | VNode[] {
        return createElement('div',['我是子组件：'+this.value])
      }
    }
  },
  filters:{
    filteTest(text:string){
      return text[0]
    }
  },
  data(){
    return{
      showValue: 'sssss'
    }
  },
  created() {
  },
  methods:{
  }
}
</script>

<style scoped lang="scss">

</style>

结果

指令上面

<div
  v-show-tooltip.everyShow="showValue|filteTest"
>{{showValue|filteTest}}</div>

directives:{
  ShowTooltip
},

就显示的不对了

不能当方法用🙃

看起来是一个方法，把组件实例打印出来找不到

指令上面那个还在找这个方法，控制台在报错😄

不能访问this😅

filters:{
  filterTest(text:string){
    console.log(this);
    return text[0]
  }
},

总结

能不用就不用，想复用里面的代码都不是很方便，可能这就是vue3删除的原因，直接写方法扩展性还好

最后

欢迎关注公众号致心空间：O(∩_∩)O😁