Vue.JS实战：简单的购物车（二）
功能概述在之前的购物车基础上，新增了一些功能，如下：（1）新增了商品类别，同类的商品永远聚集在一块；（2）增加了商品类别筛选，可以选择显示/不显示某个（或多个）类别的商品；（3）新增了方法checkQuanxuan()，当复选框没有全部选中时，全选框会保持未选中状态，反之亦然。代码分享代码同样包含三个部分，分别是HTML、JS、CSS。因为这次只修改了HTML和JS，所以只贴HTML和J
·
功能概述
在之前的购物车基础上，新增了一些功能，如下：
（1）新增了商品类别，同类的商品永远聚集在一块；
（2）增加了商品类别筛选，可以选择显示/不显示某个（或多个）类别的商品；
（3）新增了方法checkQuanxuan()，当复选框没有全部选中时，全选框会保持未选中状态，反之亦然。
代码分享
代码同样包含三个部分，分别是HTML、JS、CSS。因为这次只修改了HTML和JS，所以只贴HTML和JS。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 购物车</title>
<script src="../js/vue.min.js"></script>
<link href="../css/cart.css" rel="stylesheet">
</head>
<body>
<div id="app" v-cloak>
分类选择： <input type="checkbox" v-on:click="swapCheckCategory" v-model="checkedCategory"><span>全选</span>
<input type="checkbox" v-model="selectCategory" value="electronic" :checked="checked1" name="selectCategoryList" @click="checkQuanxuan"><span>电子产品</span>
<input type="checkbox" v-model="selectCategory" value="book" :checked="checked1" name="selectCategoryList" @click="checkQuanxuan"><span>书籍</span>
<input type="checkbox" v-model="selectCategory" value="fruit" :checked="checked1" name="selectCategoryList" @click="checkQuanxuan"><span>水果</span>
<template v-if="list.length">
<table>
<thead>
<tr>
<th><input type="checkbox" v-on:click="swapCheck" v-model="checked"></th>
<th>商品名称</th>
<th>商品分类</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody v-for="(item,index) in list">
<tr v-for="(pro,ind) in item">
<td><input type="checkbox" v-model="selectList" :id="pro.id" :value="index + '-' + ind" name="selectList" @click="checkQuanxuan"></td>
<td>{{ pro.name }}</td>
<td>{{ pro.category }}</td>
<td>{{ pro.price }}</td>
<td>
<button @click="handleReduce(index,ind)" :disabled="pro.count === 1">-</button>
{{ pro.count }}
<button @click="handleAdd(index,ind)">+</button>
</td>
<td><input type="button" value="移除" @click="handleRemove(index,ind)"></td>
</tr>
</tbody>
</table>
<div>总价：￥ {{ totalPrice }}</div>
</template>
<div v-else>购物车为空！</div>
</div>
<script src="../js/cart.js"></script>
</body>
</html>JS
var app = new Vue({
el:'#app',
data:{
product:[
{
id:1,
category:'electronic',
name:'iPhone 8',
price:8888,
count:1
},
{
id:2,
category:'electronic',
name:'Huwei Mate10',
price:6666,
count:1
},
{
id:3,
category:'electronic',
name:'Lenovo',
price:6588,
count:1
},
{
id:4,
category:'book',
name:'《Vue.js实战》',
price:79,
count:1
},
{
id:5,
category:'book',
name:'《JavaScript高级编程技术（第三版）》',
price:59,
count:1
},
{
id:6,
category:'book',
name:'《Spring实战》',
price:89,
count:1
},
{
id:7,
category:'fruit',
name:'banana',
price:1.48,
count:1
},
{
id:8,
category:'fruit',
name:'apple',
price:4.5,
count:1
},
{
id:9,
category:'fruit',
name:'grape',
price:10.1,
count:1
}
],
selectList:[],
checked:false,
checkedCategory:true,
selectCategory:['electronic','book','fruit'],
checked1:true
},
computed:{
category:function(){
return this.selectCategory;
},
totalPrice:function(){
var total = 0;
var selectlist = this.selectList;
for(var i = 0,len = selectlist.length;i < len;i++){
var outIndex = parseInt(selectlist[i].split("-")[0]);
var index = parseInt(selectlist[i].split("-")[1]);
var item = this.list[outIndex][index];
if(item){
total += parseFloat(item.price) * parseInt(item.count);
}
else{
continue;
}
}
total = total.toFixed(2);
//return total;
return total.toString().replace(/\B(?=(\d{3})+\.)/g,',');
},
list:function(){
var products = [];
var _this = this;
for(var i = 0,len = _this.category.length;i < len;i++){
var category1 = [];
var categoryName = _this.category[i];
for(var j = 0,len1 = _this.product.length;j < len1;j++){
var product1 = _this.product[j];
var productCategory = product1.category;
if(productCategory === categoryName){
category1.push(product1);
}
}
products.push(category1);
}
return products;
}
},
methods:{
handleReduce:function(index,ind){
var item = this.list[index][ind];
if(item.count < 2){
return;
}
item.count--;
},
handleAdd:function(index,ind){
var item = this.list[index][ind];
item.count++;
},
handleRemove:function(index,ind){
var proId = this.list[index][ind].id;
//遍历product数组
var pLength = this.product.length;
var pIndex = 0;
for(var k = 0;k < pLength;k++){
if(proId === this.product[k].id){
pIndex = k;
break;
}
}
this.product.splice(pIndex,1);
},
swapCheck:function(){
var selectList = document.getElementsByName('selectList');
var len2 = selectList.length;
if(this.checked){
for(var i = 0;i < len2;i++){
var item = selectList[i];
item.checked = false;
}
this.checked = false;
this.selectList = [];
}
else{
for(i = 0;i < len2;i++){
item = selectList[i];
if(item.checked === false){
item.checked = true;
this.selectList.push(selectList[i].value);
}
}
this.checked = true;
}
},
swapCheckCategory:function(){
var selectCategoryList = document.getElementsByName('selectCategoryList');
var len = selectCategoryList.length;
if(this.checkedCategory && len === this.selectCategory.length){
for(var i = 0;i < len;i++){
var item = selectCategoryList[i];
item.checked = false;
}
this.checkedCategory = false;
this.selectCategory = [];
}
else{
for(i = 0;i < len;i++){
item = selectCategoryList[i];
if(item.checked === false){
item.checked = true;
this.selectCategory.push(selectCategoryList[i].value);
}
}
this.checkedCategory = true;
}
},
checkQuanxuan:function(){
var flag = false;
var selectCategoryList = document.getElementsByName('selectCategoryList');
var len = selectCategoryList.length;
for(var i = 0;i < len;i++){
var item = selectCategoryList[i];
if(item.checked === false){
flag = true;
break;
}
}
if(flag){
this.checkedCategory = false;
}
else{
this.checkedCategory = true;
}
var flag2 = false;
var selectList = document.getElementsByName('selectList');
var len2 = selectList.length;
for(var j = 0;j < len2;j++){
var product = selectList[j];
if(product.checked === false){
flag2 = true;
break;
}
}
if(flag2){
this.checked = false;
}
else{
this.checked = true;
}
}
}
});
总结
这个简单的购物车功能，使用了Vue.js的各种指令、计算属性、方法，并没有涉及组件等高级用法，对于初学者来讲，可以巩固基础。
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)