在很多项目中，都会有数据字典表，前端通过请求后端拿到数据字典表里的数据，一般在页面列表上面状态数据都会是返回的数字，前端需要把数字转换成字典表里对应的数据值，下面写了一个前端写死的数据，stateMap里的数据可以换成从接口请求过来的数据文章来源地址https://www.toymoban.com/news/detail-826658.html
<script setup>
// 创建格式化函数
const fomartPayState = (payState) => {
const stateMap = {
1: '待付款',
2: '待发货',
3: '待收货',
4: '待评价',
5: '已完成',
6: '已取消'
}
return stateMap[payState]
}
</script>
<template>
<!-- 调用函数适配显示 -->
<p>{{ fomartPayState(order.orderState)}}</p>
</template>
文章来源：https://www.toymoban.com/news/detail-826658.html
到了这里，关于vue3 之 数据格式化函数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术2（HTML5、CSS3、JavaScript ）格式化文本标记，定义列表，＜blockquote＞，definition description，ruby——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/753184-1.png)
