vue实现----购物车

最新推荐文章于 2024-07-18 15:09:01 发布

前端小猴

最新推荐文章于 2024-07-18 15:09:01 发布

阅读量92

点赞数 1

分类专栏： vue小案例文章标签： html html5

本文链接：https://blog.csdn.net/weixin_55225560/article/details/120730345

版权

vue小案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：

布局：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div id="app">
			<!--获取元素的长度-->
			<div v-if='books.length'>
				<table >
				<thead>
					<tr>
						<th></th>
						<th>书籍名称</th>
						<th>出版日期</th>
						<th>价格</th>
						<th>购买数量</th>
						<th>操作</th>	
					</tr>
				</thead>
				<tbody>
					<!--v-for开始遍历-->
					<tr v-for="(item ,index) in books">
						<td>
					<!--<input type="checkbox" name="" id="" value="" />-->
						</td>
						<td>{{item.name}}</td>
						<td>{{item.data}}</td>
						<!--<td>{{getfullprice(item.price)}}</td>-->
						<!--用过滤器把每本书的价格过滤一边-->
						<td>{{item.price | fullprice}}</td>
						
						<td>
							<!--当购买数量<=1的时候,让按钮失效-->
							<button @click='sub (index)' :disabled="item.count <=1">-</button>
							{{item.count}}
							<button @click='add (index)' :disabled="item.count >=99">+</button>
						</td>
						<!--根据下标删除相对应的元素-->
						<td><button @click='remove(index)'>移除</button></td>
					</tr>
				</tbody>
			</table>
			<h2>总价格：<span style="background-color: red;">{{zj | fullprice}}</span></h2>
			</div>
			<!--如果元素没有了长度，则显示购物车为空-->
			<h2  v-else style="color: red;">购物车为空<span style="font-size: 60px;">！！！</span>		
			</h2>
		</div>
	</body>
	<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
	</script>
</html>

index.js:

const app = new Vue({
	el: '#app',
	data: {
		books: [

			{
				state: false,
				name: '《算法导论》',
				data: '2006-9',
				price: 85.00,
				count: 1
			}, {
				state: false,
				name: '《计算机原理》',
				data: '2006-9',
				price: 95.00,
				count: 1
			}, {
				state: false,
				name: '《前端教程》',
				data: '2006-9',
				price: 100.00,
				count: 1
			}, {
				state: false,
				name: '《计算机导学》',
				data: '2006-9',
				price: 65.00,
				count: 1
			},
		]
	},
	//	methods:{
	//		getfullprice(price){
	//			return '￥' + price.toFixed(2)
	//		}
	//	}
	methods: {
		sub: function(index) {
			this.books[index].count--
		},
		add: function(index) {
			this.books[index].count++

		},
		remove: function(index) {
			this.books.splice(index, 1)
		}
	},
	computed: {

		zj() {


			let zj = 0
			for(let item of this.books){
				zj+=item.price*item.count
			}
			return zj
		}
		
	},
	filters: {
		fullprice(price) {
			return '￥' + price.toFixed(2)
		}
	}
})

前端小猴

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实现----购物车

效果图：布局：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="app"> <!--获.
复制链接

扫一扫