master

分支 (1)

管理

管理

master

ngd_vue20240826
/
综合练习1-购物车实现.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.global.js"></script>
	</head>
	<body>
<!-- 		// 课堂练习：模拟购物车的功能，
		// 1、在购物车书屋数量左右各有一个按钮
		// 2、当点击数量左侧的按钮，则显示购物数量递减
		// 3、当点击数量右侧的按钮，则显示购物数量递增
		// 4、当购物数量为0，不能继续递减
		// 5、当购物数量为10 ，不能继续增加 -->
		<div id="app">
			<button @click="sub()">-</button>{{count}}<button @click="add()">+</button>
		</div>

	</body>
	<script>
	var app=new Vue({
		// el:用于元素的挂载，绑定页面上声明的元素的选择器
		el:"#app",
		// data指定vue中需要用到的数据对象
		data:{
			count:0
		},
		// 进行事件的指定，需要指定的事件，需要提前在methods里面进行声明
		methods:{
			sub:function(){
				if(this.count<=0){
					alert("商品数量不能小于0件")
				}else{
					this.count--
				}

			},
			add:function(){
				if(this.count==10){
					alert("商品数量不能大于10件")
				}else{
					this.count++
				}

			}


		}
	})
	</script>
</html>