主要实现的功能有：商品的单价，商品的总价，商品的单选和全选，商品数量的修改，商品的删除等功能。
该小型项目采用Vue框架作为主要操作DOM的手段，代码完全原创
实现效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
html {
font-size: 100px;
}
body {
font-size: 16px;
}
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
#box {
margin-top: 0.4rem;
}
.shop-item {
height: 1.3rem;
display: flex;
justify-content: space-between;
align-items: center;
background: rgb(252, 252, 252);
margin-top: 0.1rem;
position: relative;
}
.shop-item:nth-last-of-type(1){
margin-bottom: 0.6rem;
}
.shop-item {
border: 0.01rem solid #e5e5e5;
}
.delete {
height: 100%;
width: 0.6rem;
color: white;
outline: none;
background: rgb(221, 0, 27);
border: none;
}
.delete:after {
content: '删除';
}
a:link {
text-decoration: none;
}
.shop-item img {
margin-left: 0.05rem;
max-height: 0.8rem;
max-width: 0.8rem;
}
.shop-item a {
color: #3c3c3c;
}
.shop-name {
font-size: 0.12rem;
overflow: hidden;
height: 0.5rem;
}
.shop-name a:hover {
color: #f40;
text-decoration: underline;
}
.size {
color: #9c9c9c;
font-size: 0.12rem;
overflow: hidden;
}
.item-main {
box-sizing: border-box;
padding: 0 0 0 0.05rem;
height: 0.8rem;
width: 1.5rem;
}
.price {
color: #3c3c3c;
font-size: 0.12rem;
font-weight: 700;
font-family: Verdana, Tahoma, arial;
}
.count {
outline: none;
box-sizing: border-box;
height: 0.25rem;
line-height: 0.15rem;
border: 0.01rem solid #aaa;
color: #343434;
width: 0.4rem;
text-align: center;
padding: 0.04rem 0.05rem;
background-color: #fff;
background-position: -0.75rem -3.75rem;
float: left;
}
.reduce,.add {
float: left;
height: 0.25rem;
width: 0.15rem;
border: 0.01rem solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 0.23rem;
color: #444;
top: 0;
outline: none;
}
#countbox {
display: flex;
flex-flow: nowrap;
}
.item-sum {
text-align: center;
color: #f40;
font-size: 0.12rem;
font-weight: 700;
}
.total .item-total {
font-size: 0.12rem;
color: #f40;
font-weight: 700;
right: 100px;
}
.head {
height: 0.3rem;
background: rgb(221, 0, 27);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
position: fixed;
top: 0;
z-index: 999;
}
.foot {
z-index: 999;
height: 0.5rem;
background: #E5E5E5;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
position: fixed;
bottom: 0;
}
.total {
display: flex;
flex-flow: nowrap;
align-items: center;
color: black;
height: 100%;
}
.head:after {
content: '购物车';
}
.footse {
align-items: center;
margin-left: 0.1rem;
display: flex;
flex-flow: nowrap;
}
.foottext {
color: black;
font-size: 14px;
white-space: nowrap;
}
.foottext:after {
content: '全选';
}
.submit {
border: none;
outline: none;
height: 100%;
width: 0.6rem;
color: white;
background: rgb(221, 0, 27);
}
.submit:after {
content: '结算';
}
.singleselect {
margin-left: 0.1rem;
}
.nodata{
display: flex;
margin: 0 auto;
height: 3rem;
width: 3rem;
background-image: url(img/nodata02.png);
background-repeat: no-repeat;
justify-content: center;
align-items: flex-end;
background-size: cover;
font-size: 14px;
color: #6d757a;
}
.totaltxt{
padding-right: 0.1rem;
}
</style>
</head>
<body>
<header>
<div class="head"></div>
</header>
<div id="box">
<div v-if="items.length">
<main>
<template v-for="(item,index) in items">
<div class="shop-item">
<input v-model="items[index].checked" type="checkbox" name="" class="singleselect" value="" />
<img :src="item.src">
<div class="item-main">
<div class="shop-name"><a href="#">{{item.name}}</a></div>
<div class="size">{{item.size}}</div>
</div>
<div class="price">￥{{item.price}}</div>
<div id="countbox">
<button type="button" @click="countReduce(index)" class="reduce">-</button>
<input v-model="item.count" type="text" name="" class="count" value="" />
<button type="button" @click="countAdd(index)" class="add">+</button>
</div>
<div class="item-sum">￥{{item.price*item.count}}</div>
<button type="button" v-on:click="bookRemove" class="delete"></button>
</div>
</template>
</main>
<footer>
<div class="foot">
<div class="footse">
<input v-model="checked" @click="all" type="checkbox" name="" id="allselect" value="" />
<label for="allselect" class="foottext"></label>
</div>
<div class="total">
<div class="totaltxt">
<span style="font-size: 14px;white-space: nowrap;">合计:</span><span class="item-total">￥{{sum}}</span>
</div>
<button type="button" class="submit"></button></div>
</div>
</footer>
</div>
<div v-else>
<main>
<div class="nodata">
<p>你还暂时没有商品哦~</p>
</div>
</main>
<footer>
<div class="foot">
<div class="footse">
</div>
</div>
</footer>
</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#box',
data: {
keywords:'',
checked: false,
items: [{
src: 'https://img.alicdn.com/bao/uploaded/i1/2200798231128/O1CN01OpBz5w1KCfK7ZIb5g_!!2200798231128.jpg_80x80.jpg',
name: '优质舰队collection舰娘响手办响爷二次元动漫美少女机箱精品摆件',
size: '尺寸：精品现货送海报',
price: 79,
count: 1,
checked: false
},
{
src: 'https://img.alicdn.com/bao/uploaded/i3/1085315961/O1CN013r8Hhq1tuBWw3AoNp_!!0-item_pic.jpg_80x80.jpg',
name: '【年货价】Razer雷蛇黑寡妇蜘蛛竞技幻彩版V2电竞游戏87机械键盘RGB背光吃鸡',
size: '套餐类型：官方标配 颜色分类：87键(绿轴)',
price: 749,
count: 1,
checked: false
}
]
},
mounted: function() {},
methods: {
all: function() {
if (!this.checked) {
for (var i = 0; i < this.items.length; i++) {
this.items[i].checked=true;
}
}
else{
for (var i = 0; i < this.items.length; i++) {
this.items[i].checked=false;
}
}
},
countAdd: function(index) {
this.items[index].count++;
},
countReduce: function(index) {
if (this.items[index].count == 1) {
return;
}
this.items[index].count--;
},
bookRemove: function() {
for (var i = 0; i < this.items.length; i++) {
this.items.splice(i, 1);
}
},
search:function(keywords){
var newList=[];
for(var i=0;i<this.items.length;i++){
if(this.items[i].name.indexOf(keywords)!==-1){
newList.push(this.items[i])
}
}
return newList
}
},
computed: {
sum: function() {
var total = 0;
for (var i = 0; i < this.items.length; i++) {
if(this.items[i].checked==true){
total += this.items[i].price * this.items[i].count;}
}
return total;
}
}
});
</script>
</html>