vue中购物车的案例

最新推荐文章于 2023-11-01 15:15:53 发布

卓 zoey

最新推荐文章于 2023-11-01 15:15:53 发布

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44974676/article/details/107022951

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

‘点击加’增加购物数量，同时’总价’也会改变;点击删除会删除该一行的商品 在这里插入图片描述

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../font.css"/><!--font.css样式-->
		<script type="text/javascript" src="../js/vue.js">
        </script><!--一定要导入vue.js-->
	</head>
	<body>
		<div id="app">
			<div class="container">
				<my-cart></my-cart>
			</div>
		</div>
		<script type="text/javascript">
			var CartTitle = { //局部组件
				props: ['uname'],
				template: `<h3 class="title">{{uname}}的购物车</h3>`
			}
			var CartList = { //局部组件,使用v-for时,切记不要将其放在跟节点中
				props : ['list'],
				template: `	<div>
				<div :key='item.id' v-for='item in list' class="item"  >
						<div class="name">{{item.name}}</div>
						<div class="change">
							<span  class="iconfont icon-jian" @click.prevent='sub(item.id)'></span>
							<input type="text" class="num" style="width:90px;height:20px" :value='item.num' @blur='changeNum(item.id,$event)'/>
							<span class="iconfont icon-jia"  @click.prevent='add(item.id)'></span>
							<span class="del iconfont icon-shanchu" @click='del(item.id)' ></span>
						</div>
					</div>
			</div>`,
			methods:{
				del:function(id){
			//通过父组件进行操作
			//	console.log(id)
			//把id传递给父组件
			this.$emit('cart-del',id);
				},
				changeNum:function(id,event){
					//console.log(id,event.target.value)
					this.$emit('change-num',{
						id:id,
						type:'change',
						num:event.target.value
					})
				},
				sub:function(id){
					this.$emit('change-num',{
						id:id,
						type:'sub'
					})
				},
				add:function(id){
					this.$emit('change-num',{
						id:id,
						type:'add'
					})
				}
			}
			}
			var CartTotal = { //局部组件
				props: ['list'],
				template: `<div class="total">
				<h4>总价：{{total}}</h4>
                <button >结算</button>
			</div>`,
				computed: {
					total: function() {
						//计算商品的总价
						var t = 0;
						this.list.forEach(item => {
							t += item.price * item.num;
						});
						return t;
					}
				}
			}
			Vue.component('my-cart', {
				data: function() {
					return {
						uname: '张三',
						list: [{
							id: 1,
							name: '苹果',
							price: 1100,
							num: 1
						}, {
							id: 2,
							name: 'vivo',
							price: 1100,
							num: 1
						}, {
							id: 3,
							name: '小米',
							price: 1300,
							num: 1
						}]
					}
				},
				template: `
				<div class="cart">
					<cart-title :uname=uname></cart-title>
				     <cart-list :list='list' @cart-del="delCart($event)" @change-num='changeNum($event)'></cart-list>
					 <cart-total :list='list'></cart-total>
				</div>
				`,
				components: {
					'cart-title': CartTitle,
					'cart-list': CartList,
					'cart-total': CartTotal
				},
				methods:{
					changeNum:function(val){
				//	console.log(val)	
				//根据子组件传递过来的数据,更新list中对应的数据
				//分三种情况,输入域变更,加号变更,减号变更
				if(val.type=="change"){
				this.list.some(item=>{
					if(item.id==val.id){
						item.num=val.num;
						//终止遍历
						return true;//表示终止遍历
					}
					});
					}
					else if(val.type=='sub'){
						this.list.some(item=>{
							if(item.id==val.id){
								item.num-=1;
								//终止遍历
								return true;//表示终止遍历
							}});
							}
					else if(val.type=='add'){
						this.list.some(item=>{
							if(item.id==val.id){
								item.num+=1;
								//终止遍历
								return true;//表示终止遍历
							}
							});
							}
					
				},
					delCart:function(id){
						//根据id删除list中对应的数据
						//1.找到id所对应的索引
						var index=this.list.findIndex(item=>{
							return item.id==id;
						})
						//2.根据索引删除对应数据
						this.list.splice(index,1);
					},handle:function(e){
						alert(e)
					}
				}
			})

			var vm = new Vue({
				el: '#app',
				data: {

				},methods:{
					
				}
			})
		</script>

	</body>
</html>

font.css代码

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1886857_9ox2cu4fn2k.eot?t=1593417631731'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1886857_9ox2cu4fn2k.eot?t=1593417631731#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP4AAsAAAAACVgAAAOrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqGAIRXATYCJAMUCwwABCAFhG0HRhvZBxEVnAHJfizYthBePxAroUV6JnjA76yXSQZ1utLZ+AXg6R7E7y7OeQJjoi5Hcvbk0RdSHmU5JUDA3MEx06VvYHlrG9mMoooq2qbjAQ0o8rto9KCP//T2YP7D2E3kQd4PAXjJoCCiZu2GLXFQgF0CEAP79emGkzCiKvACR2MVnKsQczFxjGnGTWCO9/PiK8WFAwamBBxs2rtWT6p+iPvgyrHRsXSkCETD2QHlIpBAQUCB6F/o7IkMIgWReK1URVnAgXYDhor1+OBGoyLqoXgrSkcUbeEfT2KAsABKP4+tGlXwIQ6zIeBDD2GR6iGvR/Iql49iANf0W/ACscBXEFkGpgcHiQqmWz4RAC6htR/p/Yp84oiHD1t6p28du83nU65bK3Als43p27Jj3Pbc3kik5ZoHM+6l9918PsMMqZVnvX7RZsaOVLl8+/StGPV5Ma5CjsMlGcuOMGLTtmRr6dacevP2FHvFjjwj9MWHWa11bq3wlcwc9vpIW/90+sCMSfrWTN6dl0gvsGOdmBEHT6apVadKhY6cyWKuPl16cMh1W6ntfJFgJNLazMxsF1gUz8I4/+IEsSRrj/4N6dNTNfwctz3v8viSYRq07PV76+uWPUVDXaTotnzbij6TDXv33LUvd/MmzXOXvd61maNzaKd60hYqDwt3kAmqfbb+8QlxHdbqAXEJ8e2zt4+htzyof7b2KkF2CFN2QtWhP2xt/xiqvQXFqKqz1qhhaINoswYVT16cDYbTwkE6gA4TgTPtLxoLeOVefVOcFTf1WW/BmSZna4h27USNs4jHJmqIRMVLd+pab1nvWip+fjnRBfK6HPDb/A0ll72e2SVU8b/jUwA8zXJ2jVcVHauQY+HdixqLfhJRwyFlS4DJVGYrFpq5Jm1w4EbLvdACP0cCYngxjDq+MR6EOj4CA5t0kDjkRCpsQTDxURIsHKqAlwLUudhHLMORCOUB8jOJA4FmDxgEOQMSzS2kwj4HkwS+g4UWEhA7r2KvuXfI72oQCkYN8g9eda1BFt75+Te07yQoLvEIL6TR+6HMinT8ii3SECeMH1sxGzDUNXDhHoYpddBTF1Bx5pj7Os9N0ZEy1TWTnSOCBIY0IP0BT+m0DJ3Odpnvv0HWWyJQRVuL8wWRkZ8flDJFA+RV2TZqu5SPjD6sCmMGMEinAS6cHSUY6YC+eF2AFJZxHUK9Wi6MM02V2fTq5h7PAF7gBWaGkEIJU1isd6JV7r3o70U7J4ql7ygnEwA=') format('woff2'),
  url('//at.alicdn.com/t/font_1886857_9ox2cu4fn2k.woff?t=1593417631731') format('woff'),
  url('//at.alicdn.com/t/font_1886857_9ox2cu4fn2k.ttf?t=1593417631731') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1886857_9ox2cu4fn2k.svg?t=1593417631731#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shanchu:before {
  content: "\e614";
}

.icon-jian:before {
  content: "\e6d5";
}

.icon-jia:before {
  content: "\e6d4";
}

.icon-jian1:before {
  content: "\e663";
}

该案例只实现了增加数量，减少数量和删除该商品

卓 zoey

关注

0
点赞
踩
1

收藏

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

‘点击加’增加购物数量，同时’总价’也会改变;点击删除会删除该一行的商品html代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../font.css"/> <scri
复制链接

扫一扫