vue实现商品加减计算总价的实例代码
5星 · 超过95%的资源 77 浏览量
2020-10-18
05:45:15
上传
评论
收藏 47KB PDF 举报 
vue实现商品加减计算总价的实例代码实现商品加减计算总价的实例代码
主要介绍了vue实现商品加减计算总价的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的
朋友可以参考下
需求是商品只能选一次,有原价和现价.
大概的效果图是这样:
完整代码在这里,直接复制就能用:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html{
background: rgb(214,175,209);
}
/*计算器*/
#app{
text-align: center;
margin-top: 8%;
position: relative;
}
.goods_box{
width: 70vw;
margin-left:15vw;
height: auto;
margin-top: 5%;
}
.goods_box ul{
width: 100%;
overflow:auto;
}
.goods_box ul li{
float: left;
width: 23%;
height: auto;
cursor: pointer;
margin: 2% 1%;
font-size: 0.6rem;
background: #fff;
display: flex;
align-items: center;
align-content: center;
padding-bottom: 1%;
border-radius: 4px;
}
.goods_img{
width: 40%;
border-radius: 6px;
height: auto;
margin-left: -4%;
margin-top: -4%;
box-shadow: 3px 3px 2px rgba(0,0,0,.24);
}
.price{
margin-left: 6%;
text-align: left;
}
.or_price{
color: rgba(242,58,58,0.8);
text-decoration: line-through;
}
.goods_name{
margin-top: 4%;
}
.now_and_or{
margin-top: 5%;
}
.now_price{
font-size: 1rem;
}
/*计算结果的盒子*/
weixin_38635092
- 粉丝: 3
- 资源: 926
最新资源
- 处理平台删除数据梳理以及大数据表迁移方案设计.sql
- XMind_2020_v10.1.3_便携版_64位.zip
- computer-network-master
- cmake+vs2015+opencv4.8.0+opencv-contrib4.8.0源码编译
- 基于paddle框架实现的ernie+fc,bilstm+attention,cnn,bow模型的二分类，多分类，多标签分类实现
- 系统功能测试用例模版&接口测试用例模版+例子+各场景设计方向+用例设计指导+ 适用于各系统功能测试用例
- (免费分享)基于springboot健康运动-带论文013
- paddle框架写的基于ERNIE的命名实体识别逻辑 主要包含ernie+2fc进行半指针半标注的ner识别
- rt-thread-code-stm32f469-st-disco.rar开发板stm32f469-st-disco
- 基于嵌入式下的无人车控制开发demo演示
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页