vue.js数字简化 万转化k显示
在我们项目中如果用到数值过长 在页面显示多少有点沉余,以下有两种办法我们来解决这个问题
1. vue 过滤器 | (filters)
<template>
<p>{{ 要过滤的数值 | userNums }}</p>
</template>
export default {
filters: {
userNums(num) {
return num < 10000 ? num: (num/ 1000).toFixed(1) + 'k'
}
},
}
2.
使用自己封装的方法 numberFormat
<template>
<p>{{ numberFormat(要过滤的数值) }}</p>
</template>
export default{
methods:{
numberFormat(num){
if(num >= 10000){
return this.toFixed1(num / 1000) + 'k'
}else{
return num
}
},
toFixed1(num) {
num = num.toString()
const index = num.indexOf('.')
if (index !== -1) {
num = num.substring(0, index + 2)
return parseFloat(num).toFixed(1)
} else {
num = num.substring(0)
return parseFloat(num)
}
},
}
}