vue3修改带小数点的价格数字:小数点的前后数字,要分别显示成不同颜色和大小!已经封装成组件了!
需求:
修改带小数点的价格数字:小数点的前后数字,要分别显示成不同颜色和大小!已经封装成组件了!
效果:
前面大,后面小
代码:
组件:
<!--修改小数点前后数字不同颜色和大小的组件-->
<template><view class="price-container"><text class="current-price"><text class="price-icon"> ¥</text><!-- 显示小数点前的价格部分,应用传入的颜色和字体大小 --><text :style="{ color: integerColor, fontSize: integerFontSize }" class="price-integer">{{ integerPart }}</text><text class="dot">.</text><!-- 显示小数点后的价格部分,应用传入的颜色和字体大小 --><text :style="{ color: decimalColor, fontSize: decimalFontSize }" class="price-decimal">{{ decimalPart }}</text></text></view>
</template><script setup>
// 导入所需的 Vue API
import { computed, defineProps } from 'vue';// 定义组件的 props
const props = defineProps({// 价格值,必填项price: {type: Number,required: true},// 整数部分字体颜色,默认黑色integerColor: {type: String,default: '#000000'},// 整数部分字体大小,默认 24pxintegerFontSize: {type: String,default: '24px'},// 小数部分字体颜色,默认黑色decimalColor: {type: String,default: '#000000'},// 小数部分字体大小,默认 16pxdecimalFontSize: {type: String,default: '16px'}
});// 确保 price 是一个有效的数字
const numericPrice = computed(() => {return Number(props.price) || 0;
});// 计算价格的整数部分
const integerPart = computed(() => {const priceStr = numericPrice.value.toFixed(2); // 保证小数点后有两位return priceStr.split('.')[0]; // 获取小数点前的部分
});// 计算价格的小数部分
const decimalPart = computed(() => {const priceStr = numericPrice.value.toFixed(2); // 保证小数点后有两位return priceStr.split('.')[1]; // 获取小数点后的部分
});</script><style lang="scss" scoped>
/* 定义价格容器的布局 */
.price-container {display: flex;align-items: baseline; /* 对齐基线,使得不同字体大小的文本对齐 */
}/* 定义当前价格的样式 */
.current-price {display: flex;align-items: baseline; /* 对齐基线,使得不同字体大小的文本对齐 */.price-icon{font-size: 24rpx;margin-right: 2rpx;}.dot{color: #333333;}
}/* 前面的整数,默认样式可以在这里定义 */
.price-integer {/* 这里可以设置默认样式 */color: #333333;}//后面的小数点
.price-decimal {/* 这里可以设置默认样式 */color: #333333;
}
</style>
使用组件:
灰色:
<PriceDisplay:price="item.price"integerColor="#333333"integerFontSize="36rpx"decimalColor="#333333"decimalFontSize="24rpx"class="priceContainerWrapper"/>
彩色:
<PriceDisplay:price="123.45"integerColor="#FF5733"integerFontSize="30px"decimalColor="#33CFFF"decimalFontSize="18px"/>
相关文章:

vue3修改带小数点的价格数字:小数点的前后数字,要分别显示成不同颜色和大小!已经封装成组件了!
需求: 修改带小数点的价格数字:小数点的前后数字,要分别显示成不同颜色和大小!已经封装成组件了! 效果: 前面大,后面小 代码: 组件: <!--修改小数点前后数字不同…...
JVM(Java虚拟机) - JVM内存分配与内存管理
作者:逍遥Sean 简介:一个主修Java的Web网站\游戏服务器后端开发者 主页:https://blog.csdn.net/Ureliable 觉得博主文章不错的话,可以三连支持一下~ 如有疑问和建议,请私信或评论留言! 前言 Java虚拟机&…...

Linux中vim的基本介绍和使用
善为理者,举其纲,疏其网。 vim 1、vim介绍2、命令模式详情3、底行模式详情4、困难问题5、历史存疑问题6、vim配置问题6、1、配置的原理6、2、一键式配置 1、vim介绍 如果我面想要在Linux上编写代码的话,我就需要vim来帮助我们编写代码。但是…...

宝塔面板上,安装rabbitmq
废话不多说,直接上干货! 第一步:登录宝塔账号,在软件商店里搜索 第二步:点击设置 第三步:已经完成了,还看啥!...

【Docker系列】Docker 镜像管理:删除无标签镜像的技巧
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

数据采集器
目录 1. 采集Redis 2. 采集MySQL 3. 采集容器 1. 采集Redis 出口商和集成 |普罗 米修斯 (prometheus.io) 发布 奥利弗006/redis_exporter (github.com) 在目标机器上安装redis 上传redis采集器包redis_exporter-v1.53.0.linux-amd64.tar.gz [rootharbor opt]# tar -xf …...

小红书0510笔试-编程题
解题思路: 先射击左边和先射击右边两种情况,就是2*1/n*(n-1)的概率。 解题思路: 枚举所有的评论作为最小值,按评论从大到小排序,每次遍历到的都是最小值。要想得到以该评论为最小值的最大优秀度,就要维护一…...

2024年热门开放式耳机评测!悠律、韶音、声阔到底该选谁?
开放式耳机选购技巧篇,可参考选购! 作为一名数码评测博主,这两年用过的开放式耳机不下50款了,市面上的开放式耳机众多,很多人不知道该如何选择,其实选购都是有一定的技巧和规律性的,看配置就能…...

计算机毕业设计选题推荐-智慧物业服务系统-Java/Python项目实战
✨作者主页:IT毕设梦工厂✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

新手小白学习PCB设计,立创EDA专业版
本教程有b站某UP主的视频观后感 视频链接:http://【【教程】零基础入门PCB设计-国一学长带你学立创EDA专业版 全程保姆级教学 中文字幕(持续更新中)】https://www.bilibili.com/video/BV1At421h7Ui?vd_sourcefedb10d2d09f5750366f83c1e0d4a…...

查物流信息用什么软件
在电子商务日益繁荣的今天,快递物流信息的查询成为了我们日常生活中不可或缺的一部分。无论是网购达人还是商家,都需要随时掌握货物的物流动态。然而,如何快速、准确地查询物流信息却是一个令人头疼的问题。今天,我将为大家介绍一…...

(40)温度传感器
文章目录 前言 1 设置 2 记录 3 参数说明 前言 ArduPilot 已经有许多可能的温度报告来源:电调,智能电池,电机 EFI,这些独立的传感器可以用来取代 ArduPilot 中已经存在的那些设备温度报告。它们也可以只是被记录下来。 ArduP…...

【靶场实操】sql-labs通关详解----第二节:前端页面相关(Less-11-Less-17)
SQL注入攻击是一种针对Web应用程序的安全漏洞,那么自然,SQL注入攻击也和前端页面息息相关,用户输入未被正确处理、动态查询的构建、前端JavaScript代码错误,等等我问题都可能造成安全威胁。 在上一节,我们了解了基础的…...

样式与特效(2)——新闻列表
1.盒子模型的边距概念 ) Margin-top 上面 Margin-bottom 底部 Margin-right 右边 Margin-left 左边 Margin : 10px (上下左右都是10px) Margin :10px,20px (上下边距10px 左右20px) CSS里面最重要的属性之一 将页面理解成…...

NICE Seminar(2023-07-16)|演化算法的理论研究到底有什么用?(南京大学钱超教授)
模式定理(Schema Theorem) 模式定理(Schema Theorem)是遗传算法(Genetic Algorithm, GA)的重要理论基础,由约翰霍兰德(John Holland)在1975年提出。它描述了具有特定模式…...

优盘驱动器未格式化?数据恢复全攻略
在数字时代,优盘作为便携的数据存储工具,广泛应用于日常生活与工作中。然而,当遇到“优盘驱动器未被格式化”的提示时,无疑给许多人带来了不小的困扰。这一状况往往意味着优盘的文件系统出现了问题,导致系统无法正确识…...

(超全)Kubernetes 的核心组件解析
引言 在现代软件开发和运维的世界中,容器化技术已经成为一种标志性的解决方案,它为应用的构建、部署和管理提供了前所未有的灵活性和效率。然而,随着应用规模的扩大和复杂性的增加,单纯依靠容器本身来管理这些应用和服务已不再足够…...

前端常用的【设计模式】和使用场景
设计原则 最重要的:开放封闭原则 对扩展开放对修改封闭 工厂模式 用一个工厂函数,来创建实例,隐藏 new 如 jQuery 的 $ 函数,React 的 createElement 函数 单例模式 全局唯一的实例(无法生成第二个) 如 Vuex 和 Redux 的 store…...
QT下载问题:Download from your IP address is not allowed
问题 Download from your IP address is not allowed 解决 https://download.csdn.net/download/baidu_34971492/89608794...

自建数据库VS云数据库
自建数据库VS云数据库 什么是自建数据库?自建数据库方案自建数据库的优点自建数据库的缺点什么是云数据库?自建数据库的缺点什么是云数据库? 云数据库方案云数据库的优点云数据库的缺点适用场景比较总结 【纪录片】中国数据库前世今生 在数字…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

android13 app的触摸问题定位分析流程
一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...