vue处理显示金额，数据库存储为分，前端显示为万元

最新推荐文章于 2024-09-02 10:01:33 发布
最新推荐文章于 2024-09-02 10:01:33 发布
阅读量1k 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq751715340/article/details/126170795
版权
这篇博客介绍了如何在Vue应用中基于若依框架实现一个全局的金额格式化方法。通过在main.js中导入并挂载到Vue原型上，可以在任何组件中便捷地使用该方法来展示以万元为单位的金额。示例展示了在表格中使用模板插槽调用此方法，以格式化付款金额。
摘要由CSDN通过智能技术生成

基于若依的框架,写这个为了下次方便找。小白一个

定义全局方法

//对金额进行处理
export function  upMoney(contractMoney){
  contractMoney = contractMoney /10000;
   return contractMoney.toFixed(6)

}

在main.js进行全局挂载

improt upMoney  from "@/utils/ruoyi";

Vue.prototype.upMoney = upMoney

前端显示

<el-table-column label="付款金额(万元)" align="center" prop="payMoney" >
  <template slot-scope="scope">
    <span >{{upMoney(scope.row.payMoney)}}</span>
  </template>
</el-table-column>
qq751715340
关注
Vue封装--数字转换成万的方法
小柠檬爱编程
09-14 3799
后端返回的数字要像下面这样在页面上以万为单位进行显示,为了方便,封装了此方法为笔记,以供以后使用 // 万转化 formatDecimal(num, decimal) { num = this.fixeds(num * 1) num = num.toString(); let index = num.indexOf("."); if (index !== -1) { num = num.substrin.
2022最新前端vue面试题
Ajekseg的博客
08-01 530
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！答实例对象会先查找自身有没有所需成员,如果没有就会通过proto向构造函数的prototype中查找如果还是没有,又会通过构造函数的prototype的proto去找到object的prototype,还是没有找到就会通过object的prototype的proto找到null像这样用proto一层层往上查找的方式,称为原型链答答答同源就是两个页面有相同的协议域名端口就属于同源其中只要一个不同就不同源。...
vue过滤器处理金额
weixin_44131298的博客
10-11 531
{{item.realMoney|filterMoney}} filters: { filterMoney(value) { return (value/100).toFixed(2); } },
js将数字转成万
最新发布
weixin_48282959的博客
09-02 116
比如81313，会转成8.13万。
Vue中自定义指令---金额
bugQueen的博客
07-06 1019
在平时的需求开发中，会遇到很多金额类的需求，可以封装一个自定义指令
vue表格中显示金额格式化与保存时格式化为数字并校验!
weixin_33681778的博客
05-10 4032
最近项目中遇到了成本计算的,需要显示金额,保存一下,以后方便直接拿来用! 一 数字转金额格式显示 //数字转金额格式 format:function(s){ if(/[^0-9\.]/.test(s)) return "invalid value"; s=s.replace(/^(\d*)$/,"$...
index.nvue 价格显示
cuishouming的博客
05-07 196
正常页面 异常页面 造成的原因是 在nvue页面中 text标签换行造成的。
JAVA+VUE3.0+MINIO 大文件上传（极速上传，分片上传）
m0_54883970的博客
08-01 2480
/切片大小为5M我们需要重新写一个MINIO客户端来实现我们的分片上传。/***MINIO遵循AmazonS3规则，S3有的方法他都有实现*关于其他方法*参考MINIO网站*https*结合亚马逊官方文档*https*查看方法使用和效果*/}//创建分块上传任务}//合并指定上传任务的分块文件}//获取指定上传任务内的已上传的分块信息}}...
基于Springboot+Vue实现前后端分离商城管理系统
drnrrwfs的博客
07-31 2271
新新商城，一款基于Springboot+Vue的电商项目，前后端分离项目。完整的实现了一个商城系统应有的基本功能，包括但不限于以下主要功能模块前端商城用户。
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
drhrht的博客
07-31 6383
但是会出现卡顿现象。当微信支付弹窗弹出，就要持续发获取订单支付状态的请求（持续是因为并不知道用户什么时候支付，所以需要持续发请求，直到能获取到支付状态），若接收到支付成功，则路由跳转至支付成功页面。项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。例如，为防止，不经过某路由就直接在地址栏输入本路由地址而跳转至本路由，导致本路由获取不到前面路由的某些数据，所以给本路由加路由独享守卫。...
springboot+vue练手级项目，真实的在线博客系统
热门推荐
m0_67403240的博客
07-29 1万+
1=1=null">=null">
Vue实现购物车的全选、单选、显示商品价格代码实例
10-17
主要介绍了Vue实现购物车的全选、单选、显示商品价格实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于vueelement的金额格式化组件
08-10
基于vue element的金额格式化组件
vue金额设置保留两位小数，保存后查看，金额不显示问题
m0_68428581的博客
07-17 704
1.金额设置保留两位小数，保存后查看，金额不显示，加上如下代码即可 2.完整代码如下 3.使用
在vue项目中千分位展示输入金额，获取金额千分位，金额大写的方法
Baby_加油_的博客
04-21 6621
实现效果： 在用户输入完成input失焦的时候，input文本框中显示的是千分位格式的金额；在用户再次聚焦的input文本框时，文本框中展示的是正常的金额值，用户可以修改金额，失焦的时候再次千分位展示。 思路： 用两个变量，一个变量负责展示，一个变量存储实际的值，保证在任何情况下，实际值不受影响，展示按需求去展示 main.js中引入公共方法 import validate from '@/utils/validate'; Vue.prototype.$validate = validate Vue
前端页面显示 特殊需求的金额的显示，js 快速简单解决的方案
chuncui2576的博客
02-10 1056
需求 需求是这样的： 比如 后台统计出来了 总的比较大的金额，比如 900001000 也就是 9亿多的 金额。 需要再 页面上显示： xxx亿xxx万xxx元 ， 统计的金额数值： 如果是 0亿那么就是 xxx万xxx元 ， 如果是 0元就是 xxx亿xxx万 如果是 0万 ...
数据库金额方面存储
吕鹏辉的个人技术博客
07-09 2065
电商网站的金额存储都是用int类型的，存到分即可，数据里的100表示100分，即1元。 这样做起来避免了 mysql 数据库在 sum float 的时候 可能遇到的BUG。
vue将大数字单位转化成 万、亿
weixin_48854245的博客
01-13 3213
//将超过万/亿的数字加上万/亿的单位 getNum() { for (let i of this.paymentDiv) { //math.floor 就是去除小数点向下取整 math.floor(3.84) = 3 //x.toString() 就是把x变成字符串 let num1 = Math.floor(i.today).toString(); //如果num1长度大于4(num1是万级别的) if.
VUE全局金币toast提示组件封装
qq_45447899的博客
02-22 395
【代码】VUE全局金币toast提示组件封装。
vue前端如何从数据库拿数据显示在前端
07-10
在 Vue 前端中从数据库中获取数据并显示在前端，一般需要通过后端接口来实现数据的获取和传输。以下是一般的步骤： 1. 创建后端接口：在后端（比如使用 Node.js、PHP、Python 等）创建一个接口用于从数据库中获取数据。该接口可以使用数据库查询语言（如 SQL）来查询数据，并将查询结果以 JSON 格式返回给前端。 2. 在前端使用 Axios（或其他 HTTP 请求库）发起请求：在前端代码中，使用 Axios（或其他合适的库）发送 HTTP 请求到后端接口，获取数据。 3. 在前端组件中处理获取的数据：在 Vue 组件中，可以使用生命周期钩子函数（如 `mounted`）或者方法来处理从后端获取的数据。将数据存储在组件的 data 中，并在模板中进行遍历和展示。 下面是一个简单的示例代码： ```html <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { items: [] }; }, mounted() { // 发起请求获取数据 axios.get('/api/items') .then(response => { this.items = response.data; }) .catch(error => { console.error(error); }); } }; </script> ``` 在上述示例中，通过 `mounted` 钩子函数在组件挂载后发起请求，并将获取到的数据保存在 `items` 数组中，然后通过 `v-for` 指令在模板中遍历并展示数据。 需要注意的是，以上只是一个简单的示例，实际情况可能会更复杂，涉及到数据处理和错误处理等。具体实现方式还需要根据后端接口和数据库的具体情况进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值