06-Vue之计数器案例

最新推荐文章于 2024-05-19 19:21:07 发布

爱学习de测试小白

最新推荐文章于 2024-05-19 19:21:07 发布

阅读量439

点赞数

分类专栏： # Vue 文章标签： vue

-- 来着爱学习de测试小白

本文链接：https://blog.csdn.net/IT_heima/article/details/112253358

版权

Vue 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

1. 计数器案例

1.1 思路

1.2 知识点总结

1. 计数器案例

1.1 思路

data中定义数据：比如num
methods中添加两个方法：比如add（递增），sub（递减）
使用v-text将num设置给span标签
使用v-on将add，sub分别绑定给+，按钮
累加的逻辑：小于10累加，否则提示
递减的逻辑：大于0递减，否则提示
完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
</head>

<body>
    <div id='app'>
        <div id='input-num'>
            <button @click='sub'>-</button>
            <span v-text='num'></span>
            <button @click='add'>+</button>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods:{
                add:function(){            
                    if (this.num<10){
                        this.num ++;
                    }else{
                        alert('喜欢我就和我说啊！')
                    }
                },
                sub:function(){
                    
                    if(this.num>0){
                        this.num --;
                    }else{
                        alert('你是不是喜欢我！')
                    }
                }
            }
        })


    </script>



</body>

</html>