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云数据库 什么是自建数据库?自建数据库方案自建数据库的优点自建数据库的缺点什么是云数据库?自建数据库的缺点什么是云数据库? 云数据库方案云数据库的优点云数据库的缺点适用场景比较总结 【纪录片】中国数据库前世今生 在数字…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
Kafka主题运维全指南:从基础配置到故障处理
#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...
