uniapp价格前后显示不一致

最新推荐文章于 2024-08-14 17:41:27 发布

m0_68518907

最新推荐文章于 2024-08-14 17:41:27 发布

阅读量104

点赞数 1

文章标签： uni-app windows

本文链接：https://blog.csdn.net/m0_68518907/article/details/140790775

版权

单个价格显示

	<view class="">
			价格前后不一致：
			<text>￥</text>
			<text style="font-size: 40rpx;">{{frontPrice}}</text>
			<text>.</text>
			<text style="font-size: 20rpx;">{{afterPrice}}</text>
	</view>

		data() {
			return {
				price:"250.00", // 价格
				frontPrice:'', //小数点前
				afterPrice:'', // 小数点后
			};
		},
		onShow() {
			if(this.price){
				let list = this.price.split('.');
				console.log(list);
				this.frontPrice = list[0];
				this.afterPrice = list[1];
			}
		},

循环中显示

<view class="" v-for="item in list" :key="item.id">
				<text>{{item.name}}：</text>
				<text>￥</text>
				<text style="font-size: 40rpx;">{{item.frontPrice}}</text>
				<text>.</text>
				<text style="font-size: 20rpx;">{{item.afterPrice}}</text>
</view>

	data() {
			return {
				list: [{
						id: 0,
						name: '柠檬茶',
						price: '3.00'
					},
					{
						id: 1,
						name: '摇摇奶昔',
						price: '5.00'
					},
					{
						id: 2,
						name: '草莓圣代',
						price: '5.00'
					}
				],
			};
		onShow() {
			this.list.map(item => {
				console.log(item.price, item.price.split('.'));
				item.frontPrice = item.price.split('.')[0];
				item.afterPrice = item.price.split('.')[1];
			})
		},