vue金额格式化的方法
- 封装全局js文件,并在main.js中引用
//global.js
export default {
install(Vue) {
Vue.prototype.$moneyFormat = (money) => {
if ((/^(([1-9][0-9]*)|(([1-9]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(money))) {
const moneyArr = Number(money).toFixed(2).split('.');
return `${Number(moneyArr[0]).toLocaleString()}.${moneyArr[1]}`;
}
if (money === undefined || money === '') {
return '--';
}
return money;
};
};
};
//main.js
import global from './utils/global';
Vue.use(global);
- 在页面中直接使用
<div>{{ $moneyFormat( form.fee )}}</div>
html中使用
- 金额格式化 (千位符区分)
function numFormat(num) {
var money = (num.toString().indexOf('.') !== -1) ? num.toLocaleString() : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
return money ;
}
-金额千位分隔并补充小数点后两位
// 第一种
function fmoney(s, n) {
n = n > 0 && n <= 20 ? n : 2;
s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];
t = "";
for (i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
}
return t.split("").reverse().join("") + "." + r;
}
console.log(fmoney('需要格式化的值'));
- 金额只保留小数点后两位,如果是整数补充小数点后两位
//第二种
function fmoney2(x) {
let f = parseFloat(x);
if (isNaN(f)) {
return false;
}
let f = Math.round(x * 100) / 100;
let s = f.toString();
let rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s;
}
fmoney2('需要转换的值', 2)//2是保留后两位或补充小数点后两位
input
- input事件,只允许输入数字及小数点后两位。
// 退款金额
theSortNum() {
this.theNum =
this.theNum
.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
.replace(/^\./g, '') // 保证第一个为数字而不是.
.match(/^\d*(\.?\d{0,2})/g)[0] || ''; // 保留小数点后两位
if (判断) {
// ....执行
}
},
// input行内只允许输入数字
<el-input v-model="" placeholder="请输入" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
// input校验是否输入为数字并只允许小数点后两位
<el-form-item
label="金额(万元)"
prop="value"
placeholder="请输入金额"
:rules="rules.value"
>
<el-input v-model="value"></el-input>
</el-form-item>
<script>
const PATTERN_NUM = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/
const VALID1 = {
pattern: PATTERN_NUM,
message: '格式不正确',
}
export default {
data() {
return {
rules: {
value: [VALID1]
}
}
}
}
</script>