千位分割符

千位分隔符

1.在main.js中

// #ifndef VUE3
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
//千位分割符
Vue.filter('decollator', (value) => {
	if (!value) return 0

	// 将数值转换为字符串，以便处理
	const valueStr = value.toString()
	const decimalIndex = valueStr.indexOf('.')

	// 根据小数点的位置来决定处理方式
	if (decimalIndex !== -1) {
		// 有小数部分
		const intPart = valueStr.substring(0, decimalIndex)
		const floatPart = valueStr.substring(decimalIndex + 1)
		// 根据小数位数决定保留几位
		return intPart.replace(/(\d)(?=(?:\d{3})+\b)/g, '$1,') +
			'.' +
			(floatPart.length > 1 ? floatPart.substring(0, 2) : floatPart.padEnd(1, '0'))
	} else {
		// 无小数部分，仅格式化整数部分
		return valueStr.replace(/(\d)(?=(?:\d{3})+\b)/g, '$1,')
	}
})
App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

2.直接在组件中使用（最多保留两位小数，也可自行修改全保留，看需求）

<template>
	<view class="kongPage">
		<text>余额: {{money|decollator}}元</text>
		<text>余额: {{money1|decollator}}元</text>
		<text>余额: {{money2|decollator}}元</text>
	</view>
</template>
<script>
	export default {
			data() {
				return {
					money: 1000,
					money1: 1000.5,
					money2: 1000.213
				}
			}
	}
</script>

效果图：