过滤器在vue2和vue3中的使用

过滤器

含义

filter 是输送介质管道上的不可或缺的一种装置，简单来说就是过滤数据，在不改变原数组的情况下，将数组中的一些数据按照特定的方法过滤，再将过滤后的数据进行调用

vue中可以根据用途自定义很多过滤器实现不同的功能

vue3已经将其废弃

使用

vue2中使用参考以下文章

点击查看

这里我用vue3示例一下 代码如下

<template>
  <div class="about">
    原数组:
    <ul v-for="(item,index) in timeData" :key="index">
    <li>
      ID:{{item.ID}}
      time:{{ item.time }}
    </li>
   </ul>
   过滤后的数组:
   <ul v-for="(item,index) in timeData" :key="index">
    <li>
      ID:{{item.ID}}
      time:{{ timeFilters(item.time) }}
    </li>
   </ul>
   
  </div>
</template>

<script lang="ts" setup>
import { onBeforeRouteLeave } from 'vue-router';

 
let timeData:Array<any> = [
  {ID:1 , time:20220816},
  {ID:2 , time:20220817},
  {ID:3 , time:20220818},
  {ID:4 , time:20220819},
  {ID:5 , time:20220820}
]
function timeFilters(time:any){
  return time = time.toString().substring(0,4)
}
</script>

页面效果如下