Vue入门实战-实现简单的计数器

电玩女神 2022-10-28 14:20 180阅读 0赞

## 效果图 ##

![在这里插入图片描述][20210206145730686.gif]

## 实现代码 ##

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>计数器</title>
        <link rel="stylesheet" href="./css/index.css" />
      </head>
    
      <body>
        
        <div id="app">
          
          <div class="input-num">
            
            <button @click="sub">-</button>
            
            <span>{
       {result}}</span>
            
            <button @click="add">+</button>
          </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
        <script> var vue = new Vue({ el: ".input-num", data: { result: 0, }, methods: { add() { if (this.result >= 5) { alert("已经超过5了！！"); } else { this.result++; } }, sub() { if (this.result <= 0) { alert("已经小于0了！！"); } else { this.result--; } }, }, }); </script>
      </body>
    </html>

## CSS ##

body{ 
      background-color: #f5f5f5;
    }
    #app { 
      width: 480px;
      height: 80px;
      margin: 200px auto;
    }
    .input-num { 
      margin-top:20px;
      height: 100%;
      display: flex;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 4px 4px 4px #adadad;
      border: 1px solid #c7c7c7;
      background-color: #c7c7c7;
    }
    .input-num button { 
      width: 150px;
      height: 100%;
      font-size: 40px;
      color: #ad2a27;
      cursor: pointer;
      border: none;
      outline: none;
      background-color:rgba(0, 0, 0, 0);
    }
    .input-num span { 
      height: 100%;
      font-size: 40px;
      flex: 1;
      text-align: center;
      line-height: 80px;
      font-family:auto;
      background-color: white;
    }
    img{ 
      float: right;
      margin-top: 50px;
    }

[20210206145730686.gif]: /images/20221024/17133f37aebd4d8cbc87875dd3dada87.png