<!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> -->
<button v-on:click="add"> </button>
<button @click="sub">-</button>
</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>，我来为大家讲解一下关于计数器简易图?跟着小编一起来看一看吧!
计数器简易图
案例：计数器- 现在，我们来实现一个小的计数器
- 点击＋计数器 1
- 点击-计数器-1
- 这里，我们又要使用新的指令和属性了
- 新的属性:methods，该属性用于在Vue对象中定义方法。
- 新的指令:@click,该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)
- 你可能会疑惑?
- 这些@click是什么东西?
- Vue对象中又是定义el/data/methods，到底都有哪些东西可以定义，以及它们的作用是什么?
- 这些疑惑在后续学习中都会一一解开。
<!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> -->
<button v-on:click="add"> </button>
<button @click="sub">-</button>
</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>
