3.Vue计数器案例

最新推荐文章于 2024-06-03 14:05:44 发布

肝JOJO

最新推荐文章于 2024-06-03 14:05:44 发布

阅读量188

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_34620296/article/details/103057863

版权

Vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    window.onload=function(){
        var app = new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods: {
                sub:function(){
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert('不能再少了!')
                    }                   
                },
                add:function(){
                    if(this.num<10){
                       this.num++; 
                    }else{
                        alert('不能再多了!')
                    }              
                }
            },
        })
    }
    </script>

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