由于我们公司是主营业务是海淘，所以每个项目都是类似淘宝天猫之类的商城，那么购物车就是一个重点开发功能模块。介于之前我都是用jq来写购物车的，这次就用vuejs来写一个购物车。下面我就从全选，数量控制器，运费，商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑。
1.一层数据结构-全选
下面这段代码和vuejs官网里面checkbox绑定很像。不明白的可以直接上vuejs官网看看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-全选</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
a {
color: #333;
text-decoration:none;
}
</style>
</head>
<body>
<label>
<input type="checkbox" name="all" v-on:click="chooseAll" v-model="selectArr.length==goodsList.length" />
<span>全选</span>
</label>
<div v-for="(index, item) in goodsList">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<input type="checkbox" :value="index" v-model="selectArr" />
商品名称:<span v-html="item.name"></span> |
价格:<span v-html="item.price"></span>
</a>
</div>
<label>
<input type="checkbox" name="all" v-on:click="chooseAll" v-model="selectArr.length==goodsList.length" />
<span>全选</span>
</label>
<script src="/UploadFiles/2021-04-02/vue.js">
2.二层数据结构-全选
一层数据结构的购物车在现实中是很少看到的，比如我们最熟悉的淘宝购物车是按照店铺分的，那么必然是多层的数据结构。这次在写这个二层数据接口的全选，碰到一个很大的坑，一开始我是用了一层数据结构的数据，发现当对象数组里面的某个值改变了，视图竟然没有触发！，所以会造成下面所有的checkbox都被选中了，最上面的那个全选checkbox竟然还是没有被选中。感觉告诉我这是vuejs的坑，后来发现是js的坑。具体可以看这个。方法是百度到了，可是放我这里没有用（应该是版本问题）。于是我就改了数据结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-全选</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
a {
color: #333;
text-decoration:none;
}
.goods-item {
display: block;
}
.store-item {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div v-for="(index1, item) in goodsObj" class="store-item">
<p>
<span v-html="item.name"></span>
<label>
<input type="checkbox" name="all" v-on:click="chooseShopGoods(index1)" v-model="item.checked" />
<span>全选</span>
</label>
</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-for="(index, data) in item.list" class="goods-item">
<input type="checkbox" v-model="data.checked" v-on:click="choose(index1, index)" />
商品名称:<span v-html="data.name"></span> |
价格:<span v-html="data.price"></span>
</a>
</div>
<label>
<input type="checkbox" name="all" v-on:click="chooseAllGoods()" v-model="allChecked" />
<span>全选</span>
</label>
<script src="/UploadFiles/2021-04-02/vue.js">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-数量选择器(1层数据结构)</title>
<style type="text/css">
*{
padding:0;
margin: 0;
box-sizing: border-box;
font-size: 16px;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: .1px;
font-size: .1em;
line-height: 0;
clear: both;
}
.quantity-selector {
margin-bottom: 20px;
width: 8.571rem;
line-height: 2.857rem;
border: 1px solid #d1d6e4;
border-radius: 3px;
}
.quantity-selector .reduce,
.quantity-selector .add {
float: left;
width: 33.33%;
border-right: 1px solid #d1d6e4;
text-align: center;
cursor: pointer;
}
.quantity-selector .number {
float: left;
width: 33.33%;
height: 2.857rem;
padding: .5rem 0;
line-height: 1rem;
border: none;
text-align: center;
}
.quantity-selector .add {
border-left: 1px solid #d1d6e4;
border-right: none;
}
.quantity-selector .disable {
color: #d2d2d2;
cursor: default;
}
</style>
</head>
<body>
<div v-for="data in goodsList">
<p>商品数量 ：<span v-html="data.num"></span></p>
<p>商品库存 ：<span v-html="data.realStock"></span></p>
<div class="quantity-selector clearfix">
<span class="reduce" v-on:click="numChange($index, -1)" v-bind:class="{ 'disable' : data.num==1 }">－</span>
<input type="number" v-bind:value="data.num" class="number" v-bind:data-realStock="data.realStock" v-on:keyUp="numEntry($index)" v-on:keyDown="numEntry($index)" v-model="data.num"/>
<span class="add" v-on:click="numChange($index, 1)" v-bind:class="{ 'disable' : data.num==data.realStock }">＋</span>
</div>
</div>
<script src="/UploadFiles/2021-04-02/vue.js">
4.二层数据结构-数据选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-数量选择器(2层数据结构)</title>
<style type="text/css">
*{
padding:0;
margin: 0;
box-sizing: border-box;
font-size: 16px;
}
a {
text-decoration: none;
color: #333;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: .1px;
font-size: .1em;
line-height: 0;
clear: both;
}
.quantity-selector {
margin: 0 auto;
width: 8.571rem;
line-height: 30px;
border: 1px solid #d1d6e4;
border-radius: 3px;
}
.quantity-selector .reduce,
.quantity-selector .add {
float: left;
width: 33.33%;
border-right: 1px solid #d1d6e4;
text-align: center;
cursor: pointer;
}
.quantity-selector .number {
float: left;
width: 33.33%;
height: 30px;
border: none;
padding-left: 10px;
text-align: center;
}
.quantity-selector .add {
border-left: 1px solid #d1d6e4;
border-right: none;
}
.quantity-selector .disable {
color: #d2d2d2;
cursor: default;
}
/*店铺开始*/
.store-item {
width: 600px;
margin: 30px auto;
}
.store-item th {
height: 40px;
background: #d2d2d2;
-webkit-text-stroke: 1px #ff7500;
font-size: 18px;
}
.store-item td {
height: 60px;
text-align: center;
}
.cal-store-box {
text-align: right;
}
.store-footer {
width: 600px;
margin: 50px auto;
display: flex;
justify-content: space-between;
align-items: center;
}
/*店铺结束*/
</style>
</head>
<body>
<div class="store-item" v-for="(index1, item) in goodsObj">
<p v-html="index1"></p>
<table class="store-item">
<col width="10%"></col>
<col width="10%"></col>
<col width="20%"></col>
<col width="10%"></col>
<col width="40%"></col>
<col width="10%"></col>
<thead class="thead">
<tr>
<th>选择</th>
<th>商品</th>
<th>单价</th>
<th>运费</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(index, data) in item">
<td>
</td>
<td>
<p><span v-html="data.name"></span></p>
</td>
<td v-html="(data.price).toFixed(2)"></td>
<td v-html="(data.fare).toFixed(2)"></td>
<td>
<div class="quantity-selector clearfix">
<span class="reduce" v-on:click="numChange(index1, $index, -1)" v-bind:class="{ 'disable' : data.num==1 }">－</span>
<input type="number" v-bind:value="data.num" class="number" v-bind:data-realStock="data.realStock" v-on:keyUp="numEntry(index1, $index)" v-on:keyDown="numEntry(index1, $index)" v-model="data.num"/>
<span class="add" v-on:click="numChange(index1, $index, 1)" v-bind:class="{ 'disable' : data.num==data.realStock }">＋</span>
</div>
</td>
<td>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a>
</td>
</tr>
</tbody>
</table>
<div class="cal-store-box">
<p>店铺总运费: <span v-html="calEveryFare(index1)"></span></p>
<p>店铺商品总金额: <span v-html="calEveryStore(index1)"></span></p>
</div>
</div>
<div class="store-footer">
<!-- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<input type="checkbox" />
<span>全选</span>
</a> -->
<div class="cal-box">
<p>商品总金额:<span v-html="totalFare"></span></p>
<p>运费总金额:<span v-html="totalMoney"></span></p>
</div>
</div>
<script src="/UploadFiles/2021-04-02/vue.js">
5.一个完整的购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs-数量选择器(2层数据结构)</title>
<style type="text/css">
*{
padding:0;
margin: 0;
box-sizing: border-box;
font-size: 16px;
}
a {
text-decoration: none;
color: #333;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: .1px;
font-size: .1em;
line-height: 0;
clear: both;
}
.quantity-selector {
margin: 0 auto;
width: 8.571rem;
line-height: 30px;
border: 1px solid #d1d6e4;
border-radius: 3px;
}
.quantity-selector .reduce,
.quantity-selector .add {
float: left;
width: 33.33%;
border-right: 1px solid #d1d6e4;
text-align: center;
cursor: pointer;
}
.quantity-selector .number {
float: left;
width: 33.33%;
height: 30px;
border: none;
padding-left: 10px;
text-align: center;
}
.quantity-selector .add {
border-left: 1px solid #d1d6e4;
border-right: none;
}
.quantity-selector .disable {
color: #d2d2d2;
cursor: default;
}
label {
cursor: pointer;
}
.choose-all {
margin-left: 20px;
}
/*店铺开始*/
.store-item {
width: 600px;
margin: 30px auto;
}
.store-item th {
height: 40px;
background: #d2d2d2;
-webkit-text-stroke: 1px #ff7500;
font-size: 18px;
}
.store-item td {
height: 60px;
text-align: center;
}
.cal-store-box {
text-align: right;
}
.store-footer {
width: 600px;
margin: 50px auto;
display: flex;
justify-content: space-between;
align-items: center;
}
/*店铺结束*/
</style>
</head>
<body>
<div class="store-item" v-for="(index1, item) in goodsObj">
<p>
<span v-html="item.name"></span>
<label class="choose-all">
<input type="checkbox" name="all" v-on:click="chooseShopGoods(index1)" v-model="item.checked" />
<span>全选</span>
</label>
</p>
<table class="store-item">
<col width="10%"></col>
<col width="15%"></col>
<col width="15%"></col>
<col width="10%"></col>
<col width="40%"></col>
<col width="10%"></col>
<thead class="thead">
<tr>
<th>选择</th>
<th>商品</th>
<th>单价</th>
<th>运费</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(index, data) in item.list">
<td>
<input type="checkbox" name="all" v-model="data.checked" v-on:click="choose(index1, index)" />
</td>
<td>
<p><span v-html="data.name"></span></p>
</td>
<td v-html="(data.price).toFixed(2)"></td>
<td v-html="(data.fare).toFixed(2)"></td>
<td>
<div class="quantity-selector clearfix">
<span class="reduce" v-on:click="numChange(index1, $index, -1)" v-bind:class="{ 'disable' : data.num==1 }">－</span>
<input type="number" v-bind:value="data.num" class="number" v-bind:data-realStock="data.realStock" v-on:keyUp="numEntry(index1, $index)" v-on:keyDown="numEntry(index1, $index)" v-model="data.num"/>
<span class="add" v-on:click="numChange(index1, $index, 1)" v-bind:class="{ 'disable' : data.num==data.realStock }">＋</span>
</div>
</td>
<td>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="delGoods(index1, index)">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="cal-store-box">
<p>店铺总运费: <span v-html="calEveryFare(index1)"></span></p>
<p>店铺商品总金额: <span v-html="calEveryStore(index1)"></span></p>
</div>
</div>
<div class="store-footer">
<label>
<input type="checkbox" v-on:click="chooseAllGoods($event)" v-model="allChecked" />
<span>全选</span>
</label>
<div class="cal-box">
<p>商品总运费:<span v-html="totalFare.toFixed(2)"></span></p>
<p>商品总金额:<span v-html="totalMoney.toFixed(2)"></span></p>
</div>
</div>
<script src="/UploadFiles/2021-04-02/vue.js">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]