实现Vue购物车功能

最新推荐文章于 2022-11-22 13:35:24 发布

Lucky52hz

最新推荐文章于 2022-11-22 13:35:24 发布

阅读量501

点赞数

分类专栏： Vue 文章标签：学习中

本文链接：https://blog.csdn.net/weixin_45346741/article/details/100945534

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中实现购物车功能，包括完成table表单，实现数据绑定，使用动态指令v-bind:checked和@click，以及实现单个和全部商品的删除功能。最后展示了购物车的示例页面。

摘要由CSDN通过智能技术生成

1 首先完成table表单

在这里插入图片描述
改动table的css样式

<style type="text/css">
table{width: 1200px;
	border: 1px solid #e9e9e9;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;}
	table th{width: 100px;
	padding: 8px 16px;
	border: 1px solid #e9e9e9;}
	table td{width: 200px;text-align: center;
	padding: 8px 16px;
	border: 1px solid #e9e9e9;}
	a{text-decoration:none;color: black}
	span{font-size: 20px;margin: 10px 10px}
	strong{border: 1px solid;}
.checkPro{
	background-color: gray;
}
.leftConent {
	float: left;
}
.rightConent{
	float: right;
}
</style>

引用动态参数指令@click实现selectProduct，遍历productList绑定的数据
在这里插入图片描述
引用动态指令v-bind:checked实现选中功能，全选isSelectAll绑定的所有数据

2 实现数据绑定

<script >
	new Vue({
		el : "#test",
		data : {
			productList:[
				{
					'proName' :'香水',
					'proNum' : 2,
					'proPrice' :1000,
				},
				{
					'proName' :'OPPO耳机',
					'proNum' : 10,
					'proPrice' :100,
				},
				{
					'proName' :'联想鼠标',
					'proNum' : 5,
					'proPrice' :100,
				},
				{
					'proName' :'ThinkPad笔记本电脑',
					'proNum' : 1,
					'proPrice' :5200,
				}
			],
		},
	})
</script>

3 实现操作功能

	<!-- 引用循环指令v-for循环数据 -->
			<tr v-for="(item,index) in productList">
				<!-- 引用动态指令v-bind:checked实现选中功能，全选isSelectAll绑定的所有数据 -->
				<!-- 引用动态参数指令@click实现selectProduct，遍历productList绑定的数据，全部取反 -->
				<td><input type="checkBox"   v-bind:checked="item.isSelect" @click="item.isSelect=!item.isSelect"/></td>
				<td>{{item.proName}}</td>
				<!-- 引用动态参数指令@click实现数量变动，价格随之变动 -->
				<td><span><a href="#" @click="item.proNum>0?item.proNum--:''">-</a></span><strong>{{item.proNum}}</strong><span><a href="#" @click="item.proNum++">+</a></span></td>
				<td>{{item.proPrice}}</td>
				<td>{{item.proPrice*item.proNum}}</td>
				<!-- 引用动态参数指令@click实现删除数据功能 -->
				<td><a href="#" @click="deletePro(index)">删除</a></td>
			</tr>

<div class="checkPro">
			<div class="leftConent">
				<span><a href="#" @click="deleteProduct">清空购物车</a></span>
			</div>
			<div class="rightConent">
				<span>{{getTotal.totalNum}}件商品总计：￥{{getTotal.totalPrice}}</span>
			</div>
			
		</div>

4 js实际操作

实现单个删除及购物车全部删除
在这里插入图片描述

computed:{
			//检测是否全选
            isSelectAll:function(){
                //如果productList中每一条数据的isSelect都为true，返回true，否则返回false;
                return this.productList.every(function (val) { return val.isSelect});
            },
			//价格计算
			getTotal:function(){
				var prolist = this.productList.filter(function (val) { return val.isSelect}),
				//未选中状态价格初始为0
				totalPri = 0;
				//遍历数据价格
				for (var i = 0,len = prolist.length; i < len; i++) {
					totalPri+=prolist[i].proPrice*prolist[i].proNum;
				}
				//得到最后总价
				return {totalNum:prolist.length,totalPrice:totalPri}
			},
		},

5 购物车示例结果页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <title>购物车示例</title>
</head>
<style type="text/css">
table{width: 1200px;
	border: 1px solid #e9e9e9;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;}
	table th{width: 100px;
	padding: 8px 16px;
	border: 1px solid #e9e9e9;}
	table td{width: 200px;text-align: center;
	padding: 8px 16px;
	border: 1px solid #e9e9e9;}
	a{text-decoration:none;color: black}
	span{font-size: 20px;margin: 10px 10px}
	strong{border: 1px solid;}
.checkPro{
	background-color: gray;
}
.leftConent {
	float: left;
}
.rightConent{
	float: right;
}
</style>
<body>
	<div id="test">
		<table id="mytable">
			<tr>
				<th><input type="checkBox"  @click="selectProduct(isSelectAll)" v-bind:checked="isSelectAll" />全选</th>
				<th>商品</th>
				<th>数量</th>
				<th>单价(元)</th>
				<th>金额(元)</th>
				<th>操作</th>
			</tr>
			<!-- 引用循环指令v-for循环数据 -->
			<tr v-for="(item,index) in productList">
				<!-- 引用动态指令v-bind:checked实现选中功能，全选isSelectAll绑定的所有数据 -->
				<!-- 引用动态参数指令@click实现selectProduct，遍历productList绑定的数据，全部取反 -->
				<td><input type="checkBox"   v-bind:checked="item.isSelect" @click="item.isSelect=!item.isSelect"/></td>
				<td>{{item.proName}}</td>
				<!-- 引用动态参数指令@click实现数量变动，价格随之变动 -->
				<td><span><a href="#" @click="item.proNum>0?item.proNum--:''">-</a></span><strong>{{item.proNum}}</strong><span><a href="#" @click="item.proNum++">+</a></span></td>
				<td>{{item.proPrice}}</td>
				<td>{{item.proPrice*item.proNum}}</td>
				<!-- 引用动态参数指令@click实现删除数据功能 -->
				<td><a href="#" @click="deletePro(index)">删除</a></td>
			</tr>
		</table>
		<div class="checkPro">
			<div class="leftConent">
				<span><a href="#" @click="deleteProduct">清空购物车</a></span>
			</div>
			<div class="rightConent">
				<span>{{getTotal.totalNum}}件商品总计：￥{{getTotal.totalPrice}}</span>
			</div>
			
		</div>
	</div>
</body>
<script >
	new Vue({
		el : "#test",
		data : {
			productList:[
				{
					'proName' :'香水',
					'proNum' : 2,
					'proPrice' :1000,
				},
				{
					'proName' :'OPPO耳机',
					'proNum' : 10,
					'proPrice' :100,
				},
				{
					'proName' :'联想鼠标',
					'proNum' : 5,
					'proPrice' :100,
				},
				{
					'proName' :'ThinkPad笔记本电脑',
					'proNum' : 1,
					'proPrice' :5200,
				}
			],
		},
		methods:{
			selectProduct:function(_isSelect){
                //遍历productList，全部取反
                for (var i = 0, len = this.productList.length; i < len; i++) {
                    this.productList[i].isSelect = !_isSelect;
                }
            },
			deletePro : function(index){
				alert("你正在删除"+this.productList[index].proName);
				this.productList.splice(index,1);
			},
			//删除已经选中(isSelect=true)的产品
            deleteProduct:function () {
                this.productList=this.productList.filter(function (item) {return !item.isSelect})
            },
		},
		computed:{
			//检测是否全选
            isSelectAll:function(){
                //如果productList中每一条数据的isSelect都为true，返回true，否则返回false;
                return this.productList.every(function (val) { return val.isSelect});
            },
			//价格计算
			getTotal:function(){
				var prolist = this.productList.filter(function (val) { return val.isSelect}),
				totalPri = 0;
				for (var i = 0,len = prolist.length; i < len; i++) {
					totalPri+=prolist[i].proPrice*prolist[i].proNum;
				}
				return {totalNum:prolist.length,totalPrice:totalPri}
			},
		},
		mounted:function () {
        var _this=this;
        //为productList添加select（是否选中）字段，初始值为true
        this.productList.map(function (item) {
            _this.$set(item, 'isSelect', true);
        })
    	}
	})
</script>
</html>

在这里插入图片描述
查看示例链接：http://127.0.0.1:8848/Vue_one/work/work.html