Vue 计数器案例 {@click}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 直接标签操作 -->
        <h2>当前计数为:{{number}}</h2>
        <button @click="number++">+</button>
        <button @click="number--">-</button>

        <br>

        <!-- 使用函数来操作 -->
        <h2>当前计数为:{{number2}}</h2>
        <button @click="increase">+</button>
        <button @click="subtraction">-</button>
        <p>当前已经点击了:{{count}}次</p>
        
    </div>

    

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                number: 0,
                number2: 0,
                count: 0,
            },
            methods: {
                increase: function(){
                    this.count++
                    this.number2++
                },
                subtraction: function(){
                    this.count++
                    this.number2--
                }
            }
        })
    </script>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

上传图片