【Vue】编写一个0-10的计数器

最新推荐文章于 2023-05-08 23:05:56 发布

知野小兔

最新推荐文章于 2023-05-08 23:05:56 发布

阅读量572

点赞数

分类专栏：前端 Vue 文章标签： Vue JavaScript 计数器 Vue.js组件动态更新

本文链接：https://blog.csdn.net/weixin_43945903/article/details/123089516

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

思路：
在这里插入图片描述

<body>
    <!-- 计数器0-10 -->

    <div id="app">
        <div class="input-num">
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
        </div>
    </div>

    <script>
        /* 生成一个app元素 */
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                sub: function () {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("别点啦，下不去了")
                    }
                },
                add: function () {
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("别点啦，太大啦")
                    }

                }
            }
        })

    </script>
</body>

知野小兔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue】编写一个0-10的计数器

思路：<body>  <div id="app"> <div class="input-num"> <button @click="sub">-</button> <span>{{num}}</span> <button @click="add">+</b
复制链接

扫一扫