购物车案例

最新推荐文章于 2022-12-28 09:44:20 发布

子非鱼emma

最新推荐文章于 2022-12-28 09:44:20 发布

阅读量79

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_38998319/article/details/117488771

版权

VUE 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>vue版本的购物车</title>
	<meta charset="utf-8">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
	<div id="app">
	<table class="table table-bordered">
		<tr>
			<button class="btn btn-info" @click="selectAll()">{{str}}</button>
			<button class="btn btn-info">反选</button>
		</tr>
		<tr>
			<th>商品图</th>
			<th>商品名</th>
			<th>数量</th>
			<th>单价</th>
			<th>小结</th>
			<th>操作</th>
		</tr>
		<tr v-for="(v,k) in goods" :key="v.id">
			<td>
				<input type="checkbox" name="" v-model="v.isChecked">
				<img :src="v.pic" width="60"/>
			</td>
			<td>{{v.name}}</td>
			<td>
				<button @click="add(v,'jian')">-</button>
				<input type="text" disabled size="1" value="1" v-model="v.num">
				<button @click="add(v,'jia')">+</button>
			</td>
			<td>{{v.price}}</td>
			<td>{{v.price*v.num}}</td>
			<td>
				<button class="btn btn-danger">删除</button>
			</td>
		</tr>
		<tr>
			<td colspan="5">
				总价:{{total}}
			</td>
			<td>
				<button class="btn btn-info">去结算</button>
			</td>
		</tr>

	</table>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			goods:[
				{'id':1,'pic':"./images/1.jpg",'name':'性感的毛衣','num':"2",'price':'88','isChecked':false},
				{'id':2,'pic':"./images/2.jpg",'name':'性感的内裤','num':"1",'price':'79','isChecked':false},
				{'id':3,'pic':"./images/3.jpg",'name':'性感的内衣','num':"1",'price':'8','isChecked':false},
				{'id':4,'pic':"./images/4.jpg",'name':'性感的jk','num':"1",'price':'90','isChecked':false},
				{'id':5,'pic':"./images/5.jpg",'name':'性感的死库水','num':"1",'price':'8880','isChecked':false},
				{'id':6,'pic':"./images/6.jpg",'name':'性感的布鲁马','num':"1",'price':'8088','isChecked':false}

			],
			str:'全选',
			bool:true
		},
		methods:{
			add(obj,zhi){
				if(zhi == "jia"){
					obj.num++
				}else{
					if(obj.num<=1){
						alert("亲爱你!最少买一件");
						return
					}
					obj.num--
				}
			},
			selectAll(){	
				if(this.bool){
					for(var i = 0;i<this.goods.length;i++)
					{
						this.goods[i].isChecked = true;
					}
					this.str = "全不选"
					this.bool = false;
				}else{
					for(var i = 0;i<this.goods.length;i++)
					{
						this.goods[i].isChecked = false;
					}
					this.str = "全选"
					this.bool = true;
				}		
			}
		},
		computed:{
			total(){
				var total = 0;
				for(var i = 0;i<this.goods.length;i++){
					if(this.goods[i].isChecked){
						total+=this.goods[i].price*this.goods[i].num;
					}	
				}
				return total;
			}
		}
	})
</script>
</html>

子非鱼emma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车案例

<!DOCTYPE html><html><head> <title>vue版本的购物车</title> <meta charset="utf-8">  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 最新版本的 Bootst.
复制链接

扫一扫

专栏目录