当前位置: 首页 > 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; 云数据库方案云数据库的优点云数据库的缺点适用场景比较总结 【纪录片】中国数据库前世今生 在数字…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...