Vue购物车

最新推荐文章于 2024-03-01 23:07:00 发布

悄悄顽皮的猴头

最新推荐文章于 2024-03-01 23:07:00 发布

阅读量67

点赞数

分类专栏：小萌新的代码路文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/m0_56487875/article/details/120447125

版权

小萌新的代码路专栏收录该内容

32 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			input[type="text"] {
				border: none;
				text-align: center;
				outline: none;
				width: 30px;
			}

			.jiajian {
				border: 1px solid #333;
				border-radius: 10px;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				cursor: pointer;
				color: #333333;
			}

			.xuanzhong {
				color: darkorange;
			}

			img {
				width: 100px;
				height: 100px;
			}

			tr>th,
			tr>td {
				width: 130px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table border="0" cellspacing="" cellpadding="">
				<tr style="display: flex;align-items: center;">
					<th >
						
						<span @click="allselect">全选</span>
						/
						<span @click="allcancel">全不选</span>
					</th>
					<th>商品名</th>
					<th>商品图片</th>
					<th>单价</th>
					<th>数量</th>
				</tr>
				<tr v-for="(item,index) in arr" :class="{xuanzhong:item.checked}" style="display: flex;align-items: center;">
					<td>
						<input type="checkbox" v-model="item.checked" />
					</td>
					<td>{{item.name}}</td>
					<td>
						<img v-bind:src="item.imgUrl">
					</td>
					<td>{{item.price}}</td>
					<td style="display: flex;justify-content: center;color: #333333;">
						<span class="jiajian" @click="if(--item.count == 0) item.count=1">-</span>
						<span style="margin: 0 10px;width: 20px;">{{item.count}}</span>
						<span class="jiajian" @click="item.count++">+</span>
					</td>
				</tr>
			</table>
			总价：<span>{{total.toFixed(2)}}</span>
			<br> <button type="button" @click="del">删除所选内容</button>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			computed: {
				total() {
					let sum = 0;
					this.arr.map((item, index) => {
						if (item.checked) sum += item.price * item.count
					})
					return sum
				}
			},
			data: {
				arr: [{
					name: '手机',
					imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=400&h=400&f=webp&q=90',
					price: 10.1,
					count: 1,
					checked: true
				}, {
					name: '电视',
					imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef4c68fed730ec26bf2fa0ff620975c5.jpg?thumb=1&w=400&h=400&f=webp&q=90',
					price: 110.1,
					count: 1,
					checked: true
				}, {
					name: '洗衣机',
					imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec20453216dcd42f982cffe5fdbc3115.jpg?thumb=1&w=400&h=400&f=webp&q=90',
					price: 210.1,
					count: 1,
					checked: false
				}, {
					name: '耳机',
					imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50649d7b5706f4cd9f658e93db6b6564.jpg?thumb=1&w=400&h=400&f=webp&q=90',
					price: 20.1,
					count: 1,
					checked: false
				}]
			},
			methods: {
				handleChange(value) {
					console.log(value);
				},
				del() {
					var xuanzhong = false;
					this.arr.map((item, index) => {
						if (item.checked) {
							xuanzhong = true;
						}
					})
					if (!xuanzhong) {
						alert('请打勾')
						return;
					}
					this.arr = this.arr.filter(item => !item.checked)
					if (this.arr.length == 0) {
						window.location.href = 'none.html'
					}
				},
				allselect() {
					this.arr.map(item => item.checked = true)
				},allcancel(){
					this.arr.map(item => item.checked = false)
				}
			}
		});
	</script>
</html>

上面我引用的Vue是本地的，大家记得去官网下载保存哦

这里是当你点击添加购物车时，会显示空的错误信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/cart/cart-empty.png" >
		您的购物车还是空的！请先去添加购物车！！！
	</body>
</html>

悄悄顽皮的猴头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue购物车

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> input[type="text"] {.
复制链接

扫一扫