Vue3的过滤器代替方法
前言
最近博主从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