vue快速入门(五) 之简单的计数器

最新推荐文章于 2021-10-18 18:48:20 发布

一口木桶饭

最新推荐文章于 2021-10-18 18:48:20 发布

阅读量249

点赞数

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

本文链接：https://blog.csdn.net/weixin_44415928/article/details/104896720

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一个超级简单的计数器设置,如下
在这里插入图片描述

<body>
    <div id="app">
        <span @click='sub'>-</span>
        <span v-text="num"></span>
        <span @click="add">+</span>
    </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() {
                    this.num += 1
                },
                sub: function() {
                    this.num -= 1
                }
            }
        })
    </script>
</body>

首先我们设置了+号和减号,分别设置他们是可以点击的,点击对应的方法分别是add和sub就是加和减
然后我们回到方法里边, add方法就是让data里边的num加1,(num初始值是1),sub则是让num-1
在这里插入图片描述
这样我们就可以通过加减来改变中间的值了,当然bug是它可以变成负数,看需求,如果你不想让他变成负数,那么可以加上if判断

methods: {
                add: function() {
                    if (this.num >= 10) {
                        alert("数字太大啦,小一点")
                    } else {
                        this.num += 1
                    }
                },
                sub: function() {
                    if (this.num <= 0) {
                        alert("数字太小啦,大一点")
                    } else {
                        this.num -= 1
                    }
                }
            }