【Vue.js学习】三、Vue案例：计数器

• 实现计数器，要用到Vue的监听语法：v-on:click="函数名"
• 声明函数后，在js中写入：methods 进行对函数的控制
• 下面进行详细解释

一、HTML页面

<div id="app">
    <h2>当前计数：{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</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>

三、效果