Vue3中代替filters过滤器三种方案

一、需求分析

播放量格式化

方式一、计算属性（传值）

<script setup>
import { computed } from "vue";
// 方式一 计算属性
const filterPlayCount = computed(() => {
  return (playCout) => {
    if (playCout < 9999) return playCout;
    else return (playCout / 10000).toFixed(2) + "万";
  };
});
</script>

<span class="playCount">{{
   filterPlayCount(item.playCount)
}}</span>

方式二、方法调用

<script setup>
// 方式二 调用方法调用
const filterPlayCount = (playCout) => {
  if (playCout < 9999) return playCout;
  else return (playCout / 10000).toFixed(2) + "万";
};
</script>

<span class="playCount">{{
   filterPlayCount(item.playCount)
}}</span>

方式三、自定义指令

<script setup>
// 方法三 自定义指令过滤
const vCount = {
  mounted: (el, binding, vnode, prevVnode) => {
    console.log(el, binding, vnode, prevVnode);
    const { value: playCount } = binding;
    if (playCount > 9999) el.innerText = (playCount / 10000).toFixed(2) + "万";
    else el.innerText = playCount;
  },
};
</script>

<span class="remd_lnum" v-count="item.playCount"></span>