vue购物车加减按键

最新推荐文章于 2024-05-31 07:18:46 发布

yfy538

最新推荐文章于 2024-05-31 07:18:46 发布

阅读量400

点赞数

分类专栏： web前端文章标签： vue

本文链接：https://blog.csdn.net/yfy538/article/details/114632977

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
*{
padding: 0;
margin:0;
border: none;
}
html,body{
	width: 100%;
	height: 100%;
}
#center{
	width: 130px;
	height: 30px;
	margin:100px auto;
	line-height: 30px;
	border-radius: 10px;
}
#box{
	width: 150px;
}
#num{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 5px 15px;
	box-sizing: border-box;

}
#remove,#add{
	background-color: red;
	text-align: center;
	padding: 5px 15px;
	border: 1px solid #ccc;
}
#remove{
	border-radius: 7px 0 0 7px;
}
#add{
	border-radius:  0 7px 7px 0 ;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="center">
	<div id="box">
		<span id="remove" @click="remove">-</span><span id="num">{{num}}</span><span id="add" @click="add">+</span>
	</div>
</div>
<script>
	var vm = new Vue({
		el:"#box",
		data:{
			num:0
		},
		methods:{
			remove:function(){
				if(this.num>0){this.num --}	
			},
			add:function(){
				this.num ++
			}
		}
	})
</script>
</body>
</html>