Vue计数器编写 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<div id="appe">
			<h2>当前计数：{{counter}}</h2>
			<!-- 之前常用的 -->
<!-- 			<button v-on:click="counter--">-</button>
			<button v-on:click="counter++">+</button> -->
			
			<button type="button" v-on:click="add()">++</button>
			<button type="button" v-on:click="sub()">--</button>
			
			<!-- 此处的@click是上面v-on:click的语法糖，也是简写-->
			<button @click="add()"></button>
			
		</div>

		<script src="js/v2.6.10/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#appe',
				data: {
					counter: 1
				},
				methods: {
					add: function() {
						console.log("我现在就是在做加法")
						this.counter++;
					},
					sub: function() {
						console.log("我现在就是在做减法")
						this.counter--;
					}
				}
			})
		</script>

	</body>
</html>
posted @ 2021-12-07 22:02  Yaoteng  阅读(76)  评论(0)    收藏  举报