vue项目中实现价格被横线划掉，折扣价效果

最新推荐文章于 2023-09-17 16:40:16 发布
最新推荐文章于 2023-09-17 16:40:16 发布
阅读量1.2k 收藏 7
点赞数 1
分类专栏： 功能实现 文章标签： vue css js css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seeeeeeeeeee/article/details/119605232
版权

效果图

在这里插入图片描述

代码

横线划掉效果就是用到了css的一句代码：text-decoration: line-through;
其他颜色大小是自己改的。

<p class="usa">
            ￥499.00
            <span
              style="
                text-decoration: line-through;
                font-size: 12px;
                color: #ccc;
              "
              >￥799</span
            >
          </p>
接口写好了吗
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue购物车效果
as_long_的博客
10-07 400
一、介绍 vue购物车效果实现了全选
vue项目中实现的微信分享功能示例
01-21
本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考，具体如下： /* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿！', desc: '体验优质服务', ...
给价格或者数字加横线
Carina的编程技术博客
04-03 1804
我用微信小程序作为例子： wxml <view class='hismoney'>￥{{money}}</view> <view class='nowmoney'>￥{{money}}</view> js data: { money:88, update:12, }, wxss .hismoney{ ...
Vue简单实现商城订单折扣
loveSleepyCat的博客
07-21 2034
Vue简单实现商城订单折扣 我开始上传我认为还行的案例了，基本都是我自己写的，思路上可能有借鉴其他人的代码，不过别人的东西你完全掌握了，那你就可以说是你的了。 折扣: 1、单间商品数量满两件88折，满三件7折 2、商品总价满400减50，满八百减100，以此类推 3、商品总价大于299包邮，不满需出12元运费 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> &
价格横线划掉
lucky_girl_girl的博客
02-28 1306
价格横线划掉效果，用text-decoration:line-through; 在这里插入代码片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met...
html价格划掉的样式,用css布局价格划线_价钱中划线_价格中间贯穿删除线效果样式布局...
weixin_39610774的博客
06-17 4579
使用css样式布局价格划线，价钱中划线效果，优惠前原价格中间使用删除线一样效果样式各大电商平台，个人商城也好，各大产品买卖也好，都会用原价格和优惠后价格形成对比，让用户产生购买下单欲望。通常会布局显示出原价格与优惠后价格，而原价格使用中划线(价格中间用一道横线删除线)。优惠价格显示正常，原价格使用中划线样式中划线在HTML标签中可以使用删除线实现。如果要CSS样式布局，就采用text-decora...
菜鸟成长记-UILabel使用、横线划掉价格
夜破星辰_JSON的博客
03-26 1935
UILabel的使用可以说是无处不在，也可以说是简单易懂、他可以实现很到有趣效果，这里给大家浅尝一下它的一些实际中比较有用的技术点 一般电商中会有一个价格信息显示，会用横线划掉，其实这个效果实现有很多种，我这里讲解两种 第一种：      UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 100,40
详解Vue项目中实现锚点定位
10-17
主要介绍了Vue项目中实现锚点定位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目实现级联效果
10-07
省市区三级联动实现
vue和react等项目中更简单的实现展开收起更多等效果示例
08-28
vue和react项目中更简单的实现展开收起更多等效果示例 在本文中，我们将主要介绍如何在 Vue 和 React 项目中实现展开收起更多等效果。这个示例具有很高的参考价值，对感兴趣的小伙伴们可以作为参考。 首先，我们...
Vue实现移动端左右滑动效果的方法
10-17
最近得到一个新需求，需要在Vue项目的移动端页面上加上左右滑动效果，经过一番折腾，最终决定四月vue-touch。下面小编把实现代码分享给大家，感兴趣的朋友一起看看吧
css实现价格降价线
weixin_45483535的博客
12-01 682
css实现价格降价线
python商品会员打折_vue 商品满件折扣计算价格
weixin_39561577的博客
12-04 763
let new_arr = [{"quantity": 3,"discount": 0.99}, {"quantity": 4,"discount": 0.95}, {"quantity": 6,"discount": 0.90}, {"quantity": 10,"discount": 0.88}]/*** @method* @author gedesiwen* @param {array} ...
基于html+css的购物网站前端页面【折扣社】前端网站
热门推荐
resilient的博客
03-21 2万+
2014年学生时代学前端的时候写的,现在回头来看,很多地方都没有考虑到,比如兼容性,分布式布局 现在已做PHP开发,在回头来看代码,发现那个时候的代码稚嫩, 慢慢的有时间 了,应该做代码重构,应该尝试Vue,React 之前实现的效果如下,主要做了6个页面 - 注册页面 - 登录页面 - 首页 - 商品详情页 - 购物车页面 - 热销商品页 ...
nodejs+vue+elementui休闲娱乐美食优惠卷商城销售系统
QQ402205496的博客
04-28 118
此外，用户还可以根据票务的分类快速的定位相关的票务内容。管理员登录系统后，可以对首页、个人中心、用户管理、折扣票管理、分类管理、订单信息管理、退票信息管理、出票信息管理、系统管理等功能进行相应的操作管理。管理员登录后，主要模块包括首页、个人中心、用户管理、折扣票管理、分类管理、订单信息管理、退票信息管理、出票信息管理、系统管理等功能。第七章总结与心得体会 21。
vue2之水果打折案例,多个过滤器的应用
weixin_47039303的博客
11-20 515
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水果打折</title> </head> <body> <div id="app"> <p v-for="f in fruit" :key="f.id"> {{f.id}}---{{f.price | discount
vue 商品价格小数小写
想名字想老半天的博客
07-07 483
商品价格小数小写可以采用数组分割的方法；比如现在有一个价格是1；需要展示效果1.00 要求00小写；
【Vue】用Vue代码详细介绍computed计算属性的用法
最新发布
Jacker
09-17 314
当需要进行一些复杂的、依赖于其他属性的计算时，可以使用计算属性来处理这些计算，而不是在模板中直接进行计算。的，也就是说，它们只有在需要时才会进行计算，然后缓存起来，直到依赖的属性发生变化时才重新计算。这样可以避免不必要的计算，提高了应用程序的性能。属性则返回商品原价乘以折扣。在模板中，我们可以直接使用。需要注意的是，计算属性的计算是。来显示商品价格和折扣后价格。属性直接返回商品原价，而。
vue 的过滤器
qq_48957847的博客
02-09 75
vue过滤器的使用 （filter） filter文件中的时间格式 导出声明 main.js 文件的引用
vue项目中echarts加vue-awesome-swiper实现效果
04-29
要在Vue项目中使用Echarts和Vue-Awesome-Swiper，你需要先安装它们。你可以使用npm或者yarn安装它们： ``` npm install echarts vue-awesome-swiper ``` 或者 ``` yarn add echarts vue-awesome-swiper ``` 接下来，你需要在Vue组件中导入并使用它们。下面是一个例子： ```html <template> <div> <swiper :options="swiperOptions"> <swiper-slide> <div ref="chart1" class="chart"></div> </swiper-slide> <swiper-slide> <div ref="chart2" class="chart"></div> </swiper-slide> <swiper-slide> <div ref="chart3" class="chart"></div> </swiper-slide> </swiper> </div> </template> <script> import Swiper from 'vue-awesome-swiper'; import 'swiper/dist/css/swiper.css'; import echarts from 'echarts'; export default { components: { Swiper, }, data() { return { swiperOptions: { loop: true, }, }; }, mounted() { this.renderChart(this.$refs.chart1, 'chart1'); this.renderChart(this.$refs.chart2, 'chart2'); this.renderChart(this.$refs.chart3, 'chart3'); }, methods: { renderChart(container, chartId) { const chart = echarts.init(container); chart.setOption(this.getChartOption(chartId)); }, getChartOption(chartId) { // 这里根据不同的chartId生成不同的Echarts配置 // 省略具体实现代码 }, }, }; </script> ``` 这里我们使用了Vue-Awesome-Swiper来实现轮播图，每个swiper-slide里面都包含了一个Echarts图表。在mounted函数中，我们通过ref获取每个chart的DOM元素，并使用Echarts渲染图表。你可以根据自己的需求修改getChartOption函数，生成不同的Echarts配置。 注意：你需要在组件中引入Echarts和Vue-Awesome-Swiper，并且在样式中引入Swiper的CSS文件。如果你使用了Vue CLI创建项目，可以在main.js中全局引入echarts和swiper.css： ```javascript import Vue from 'vue'; import App from './App.vue'; import echarts from 'echarts'; import 'swiper/dist/css/swiper.css'; Vue.prototype.$echarts = echarts; new Vue({ render: (h) => h(App), }).$mount('#app'); ``` 这样，在整个应用中都可以使用echarts和swiper了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

接口写好了吗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值