vue.js开发计数器


vue.js开发计数器(图1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
        .input-num{
            text-align: center;
            width200px;
            height50px;
        
            margin0 auto;
            margin-top5%;
            border1px solid #ccc;
            border-radius5px;
        }
        .input-num span{
            display: inline-block;
            width90px;
        }
        .input-num button{
            border: none;
            width50px;
            height50px;
            line-height50px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
        </div>
     
    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="./vue.js"></script>
    <script>
        var app =  new Vue({
            el:"#app",
            data:{
                num:1,
            },
            methods:{
               sub:function(){
                   if(this.num>0){
                       this.num--
                   }
               },
               add:function(){
                   if(this.num<20){
                       this.num++;
                   }
               }
            }
        })
    </script>
</body>
</html>


您可能还会对下面的文章感兴趣: