Vue实现购物车，超简单

最新推荐文章于 2024-05-16 00:47:13 发布

qq_40103002

最新推荐文章于 2024-05-16 00:47:13 发布

阅读量133

点赞数

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

本文链接：https://blog.csdn.net/qq_40103002/article/details/103246907

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue购物车(runoob.com)</title>
<script src="Vue.js"></script>
</head>
<style>
	#app{
		box-sizing: border-box;
		width:550px;
		height:550px;
		position: relative;
		margin: 150px auto;
		background: steelblue;
		border-radius: 3px;
		text-align: center;
		color: white;
		padding: 5px 50px;
	}
	h1{
		font-size: 55px;
		text-shadow: 0px 3px 0px rgba(0,0,0,0.1);
	}
	.sp{
		width:400px;
		height:75px;
		background: rgb(142,193,109);
		margin: 10px auto;
		font-weight: bolder;
		line-height: 75px;
		font-size: 24px;
		cursor: pointer;
	}
	.left{
		float: left;
		text-indent: 1.5em;
	}
	.right{
		float: right;
		position: relative;
		right:1.5em;
	}
	.truea{
		background: indianred;
	}
	hr{
		width:400px;
		margin:10px auto;
		border-color: white;
	}
</style>
<body>
<div id="app">
  <h1 class="head">Services</h1>
  <div class="sp" v-bind:class="site.active+'a'" v-on:click="site.active=!site.active;check()"  v-for="site in sites">
	  <span class="left">{{site.name}}</span>
	  <span class="right">${{site.price}}</span>
  </div>
  <hr size="1" />
  <p>${{total}}</p>
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			sites:[
				{name:"Web Development",price:300,active:false},
				{name:"Design",price:400,active:false},
				{name:"Integration",price:250,active:false},
				{name:"Traning",price:200,active:false}
			],
			total:0
		},
		methods:{
			check:function(){
				this.total=0
				for(let i=0;i<this.sites.length;i++)
				{
					if(this.sites[i].active)
					{
						this.total+=this.sites[i].price
					}
				}
			}
		}
	})
</script>
</body>
</html>

qq_40103002

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue实现购物车，超简单

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue购物车(runoob.com)</title><script src="Vue.js"></script></head><style> #app{...
复制链接

扫一扫