vus购物车

qq_44374388

于 2020-07-31 16:58:29 发布

阅读量213

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_44374388/article/details/107716915

版权

1.引入vue.js

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>

2.完整代码（不解释那么多，不懂自己领悟去）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
		table{
	border:1px solid #e9e9e9;
	border-collapse: collapse;
    border-spacing: 0;
}

th,td{
	padding: 8px 16px;
	border: 1px solid #e9e9e9;
	text-align: left;
}

th{
	background-color: #f7f7f7;
	color:#5c6b77;
	font-weight: 600;
}
.image{
	width: 100px;
}

	</style>
	</head>
	<body>
		<div id="app">
			<div v-if="boolist.length>0">
				<table border="" cellspacing="" cellpadding="">
					<tr>
						<td></td>
						<!-- <td>全选<input type="checkbox" name="" id="" value="" /></td> -->
						<td>商品名</td>
						<td>图片</td>
						<td>时间</td>
						<td>价格</td>
						<td>购买数量</td>
						<td>删除</td>
					</tr>

					<tr v-for="(a,i) in boolist">
						<td>{{a.id}}</td>
						<td>{{a.name}}</td>
						<td><img v-bind:src="a.image" v-bind:class="{image:a.images}" width="50px" @mouseenter="enter(i)" @mouseleave="leave(i)" /></td>
						<td>{{a.data}}</td>
						<td>￥：{{a.price}}</td>
						<td><button type="button" @click="aa(i)">+</button>
							<input type="text" style="width: 10px;" v-model="a.count" />
							<button type="button" @click="ab(i)">-</button></td>
						<td><button type="button" @click="ac(i)">删除</button></td>
					</tr>
				</table>
				<p>
					总价格：{{aas}}
				</p>

			</div>
			<div v-else>
				没有商品了
			</div>
		</div>
	</body>
	<script type="text/javascript" >
		let a = new Vue({
			el: "#app",
			data: {
				boolist: [{
						id: 1,
						images: false,
						"image": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg",
						name: 'Vue.js实战',
						data: '2015-11-19',
						price: 35,
						count: 1
					},
					{
						id: 2,
						images: false,
						"image": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg",
						name: 'Vue.js实战',
						data: '2014-03-21',
						price: 45,
						count: 1
					},
					{
						id: 3,
						images: false,
						"image": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg",
						name: 'Vue.js实战',
						data: '2012-05-03',
						price: 85.23,
						count: 1
					},
					{
						id: 4,images: false,
						
						"image": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg",
						name: 'Vue.js实战',
						data: '2016-01-01',
						price: 73,
						count: 1
					},
					{
						id: 5,
						images: false,
						"image": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg",
						name: 'Vue.js实战',
						data: '2017-08-15',
						price: 15,
						count: 1
					}
				]
			},
			methods: {
				aa: function(i) {
					this.boolist[i].count++;
				},
				ab: function(i) {
					if (this.boolist[i].count <= 0) {
						alert("已经没有商品了哦");
					} else {
						this.boolist[i].count--;
					}
				},
				ac: function(s) {
					this.boolist.splice(s, 1);
				},
				enter: function(s) {
					this.boolist[s].images = true;
				},
				leave: function(s) {
					this.boolist[s].images = false;
				}
			},
			computed: {
				aas: function() {
					// return this.item[0].a;
					let ss = 0;
					for (let j = 0; j < this.boolist.length; j++) {
						ss += this.boolist[j].price * this.boolist[j].count;
					}
					return ss.toFixed(2);
				}
			}
		})
	</script>
</html>

3.实现图片
在这里插入图片描述

qq_44374388

关注

0
点赞
踩
0

收藏

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

1.引入vue.js<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>2.完整代码（不解释那么多，不懂自己领悟去）<!DOCTYPE html><html> <head&
复制链接

扫一扫