Vue学习--------------（2）计数器

写法一：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
	<div id="app">
		<h2>当前计数：{{counter}}</h2>
		<button v-on:click="counter++">+</button>
		<button v-on:click="counter--">-</button>
	</div>
	<script src="../js/vue.js"></script>
	<script>
		const app=new Vue({
			el : '#app',      //用于挂载要管理的元素
			data : {          //定义数据
				counter : 0
			}
		})
	</script>
</body>
</html>

　　

写法二：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
	<div id="app">
		<h2>当前计数：{{counter}}</h2>
		<button v-on:click="add">+</button>
		<button @click="sub">-</button>   //@click="sub" 等同于 v-on:click="sub"
	</div>
	<script src="../js/vue.js"></script>
	<script>
		const app=new Vue({
			el : '#app',      //用于挂载要管理的元素
			data : {          //定义数据
				counter : 0
			},
			methods : {
				add : function () {
					console.log('add被执行');
					this.counter++
				},
				sub : function () {
					console.log('sub被执行');
					this.counter--
				}
			}
		})
	</script>
</body>
</html>

　　

posted @ 2021-03-13 16:33  455994206  阅读(33)  评论(0)    收藏  举报