当前位置: 首页 > news >正文

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修改带小数点的价格数字:小数点的前后数字,要分别显示成不同颜色和大小!已经封装成组件了!

需求&#xff1a; 修改带小数点的价格数字&#xff1a;小数点的前后数字&#xff0c;要分别显示成不同颜色和大小&#xff01;已经封装成组件了&#xff01; 效果&#xff1a; 前面大&#xff0c;后面小 代码&#xff1a; 组件&#xff1a; <!--修改小数点前后数字不同…...

JVM(Java虚拟机) - JVM内存分配与内存管理

作者&#xff1a;逍遥Sean 简介&#xff1a;一个主修Java的Web网站\游戏服务器后端开发者 主页&#xff1a;https://blog.csdn.net/Ureliable 觉得博主文章不错的话&#xff0c;可以三连支持一下~ 如有疑问和建议&#xff0c;请私信或评论留言&#xff01; 前言 Java虚拟机&…...

Linux中vim的基本介绍和使用

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

宝塔面板上,安装rabbitmq

废话不多说&#xff0c;直接上干货&#xff01; 第一步&#xff1a;登录宝塔账号&#xff0c;在软件商店里搜索 第二步&#xff1a;点击设置 第三步&#xff1a;已经完成了&#xff0c;还看啥&#xff01;...

【Docker系列】Docker 镜像管理:删除无标签镜像的技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐: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笔试-编程题

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

2024年热门开放式耳机评测!悠律、韶音、声阔到底该选谁?

开放式耳机选购技巧篇&#xff0c;可参考选购&#xff01; 作为一名数码评测博主&#xff0c;这两年用过的开放式耳机不下50款了&#xff0c;市面上的开放式耳机众多&#xff0c;很多人不知道该如何选择&#xff0c;其实选购都是有一定的技巧和规律性的&#xff0c;看配置就能…...

计算机毕业设计选题推荐-智慧物业服务系统-Java/Python项目实战

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

新手小白学习PCB设计,立创EDA专业版

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

查物流信息用什么软件

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

(40)温度传感器

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

【靶场实操】sql-labs通关详解----第二节:前端页面相关(Less-11-Less-17)

SQL注入攻击是一种针对Web应用程序的安全漏洞&#xff0c;那么自然&#xff0c;SQL注入攻击也和前端页面息息相关&#xff0c;用户输入未被正确处理、动态查询的构建、前端JavaScript代码错误&#xff0c;等等我问题都可能造成安全威胁。 在上一节&#xff0c;我们了解了基础的…...

样式与特效(2)——新闻列表

1.盒子模型的边距概念 ) Margin-top 上面 Margin-bottom 底部 Margin-right 右边 Margin-left 左边 Margin : 10px &#xff08;上下左右都是10px&#xff09; Margin &#xff1a;10px,20px (上下边距10px 左右20px) CSS里面最重要的属性之一 将页面理解成…...

NICE Seminar(2023-07-16)|演化算法的理论研究到底有什么用?(南京大学钱超教授)

模式定理&#xff08;Schema Theorem&#xff09; 模式定理&#xff08;Schema Theorem&#xff09;是遗传算法&#xff08;Genetic Algorithm, GA&#xff09;的重要理论基础&#xff0c;由约翰霍兰德&#xff08;John Holland&#xff09;在1975年提出。它描述了具有特定模式…...

优盘驱动器未格式化?数据恢复全攻略

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

(超全)Kubernetes 的核心组件解析

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

前端常用的【设计模式】和使用场景

设计原则 最重要的&#xff1a;开放封闭原则 对扩展开放对修改封闭 工厂模式 用一个工厂函数&#xff0c;来创建实例&#xff0c;隐藏 new 如 jQuery 的 $ 函数&#xff0c;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云数据库 什么是自建数据库&#xff1f;自建数据库方案自建数据库的优点自建数据库的缺点什么是云数据库&#xff1f;自建数据库的缺点什么是云数据库&#xff1f; 云数据库方案云数据库的优点云数据库的缺点适用场景比较总结 【纪录片】中国数据库前世今生 在数字…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; 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 解决方案&…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

Pandas 可视化集成:数据科学家的高效绘图指南

为什么选择 Pandas 进行数据可视化&#xff1f; 在数据科学和分析领域&#xff0c;可视化是理解数据、发现模式和传达见解的关键步骤。Python 生态系统提供了多种可视化工具&#xff0c;如 Matplotlib、Seaborn、Plotly 等&#xff0c;但 Pandas 内置的可视化功能因其与数据结…...