- 实现计数器,要用到Vue的监听语法:v-on:click="函数名"
- 声明函数后,在js中写入:methods 进行对函数的控制
- 下面进行详细解释
一、HTML页面
<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 v-on:click="sub">-</button>
</div>
二、Js代码
- this 指向当前变量,也就是下图的app对象
- 新的属性:methods,在Vue对象中定义方法
<script>
const app = new Vue({
el: "#app",
data: {
counter: 1
},
methods: {
add: function () {
console.log('add被执行');
this.counter++;
},
sub: function () {
console.log('sub被执行')
this.counter--;
}
}
})
</script>