Vue3的filter过滤器代替方法

---

前言

最近博主从vue2转到vue3，惊奇的发现vue2里面的filter在vue3中不再支持，官方建议用计算属性或方法代替过滤器，而不是使用过滤器，所以博主希望通过这篇文章分享filter的代替方法

一、使用步骤

博主遇到的需求是这样，在日期选择下拉框中引入第三方接口，但第三方接口返回的数据格式全是浮点型，同时小数点后面的位数不统一，这种情况下博主选择使用过滤器

1.vue2的filter

代码如下（示例）：

<template>
  <h1>Example</h1>
  <p>{{ number| formatCloud }}</p>
</template>

<script>
  export default {
   data: function () {
    return{
      number:2.3333333
    }
  },
    filters: {
      formatCloud(value) {
         return parseFloat(value).toFixed(2);
      }
    }
  }
</script>

2.vue3的computed

代码如下（示例）：

<template>
  <h1>Example</h1>
  <p>{{formatCloud(number)}}</p>
</template>

<script>
import {computed} from "vue";

export default {
  data: function () {
    return{
      number:2.3333333
    }
  },
  setup(){
    const formatCloud = computed(() => {
      return function(index){
        return parseFloat(index).toFixed(2);
      }
    })

    return {formatCloud}
  }
}
</script>

总结

上述内容如果存在欢迎大家批评指正！！！

PS:本人目前可接php,vue,java,python相关毕业设计，课程设计和各类小程序开发，欢迎有意者QQ联系 3496790971