vuefilters过滤器的使用，给金钱价格加上符号单位

今天变成小蛋糕了吗

于 2021-11-23 18:06:57 发布

阅读量1.3k

点赞数

文章标签： js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_43226883/article/details/121499036

版权

本文介绍了如何在Vue.js中使用自定义过滤器来格式化价格数据，将后端提供的数字价格转换为带有人民币符号和单位的显示形式。通过创建一个名为`currency`的过滤器，可以实现将价格如'888'转化为'￥888.00元'的展示效果。在模板中，只需使用`{{ price | currency }

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常后端给出的价格都是price:888
我们要求展示的数据要求加上￥符号和单位，我们可以写一个简单的过滤器

在这里插入图片描述

 filters: {
    currency(val) {
      if (!val) return '0.00';
      return '￥' + val.toFixed(2) + '元';
    },
  },

用法：

 <div>{{ price | currency }}</div>