2. 程式人生 > 其它 >Vue入門實戰-實現簡單的計數器

Vue入門實戰-實現簡單的計數器

阿新 • • 發佈：2021-02-07

技術標籤：Vuevuejsjavascriptcsshtml5

效果圖

在這裡插入圖片描述

實現程式碼

<!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>
    <!-- html結構 -->
    <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;
}

相關推薦

Vue入門實戰-實現簡單的計數器

技術標籤：Vuevuejsjavascriptcsshtml5 效果圖 實現程式碼 <!DOCTYPE html> <html lang="en">

基於vue和bootstrap實現簡單留言板功能

本文例項為大家分享了vue實現簡單留言板功能的具體程式碼，供大家參考，具體內容如下

JDBC+MySQL入門實戰(實現CURD的例子)

前言 hello我是bigsai，今天咱們進行JDBC+MySQL實戰，非常適合初入門的小夥伴開啟新的世界。實現一個增刪改查(curd)的例子。先點贊再觀看、帥哥靚女養成好習慣！

swoole 專案實戰——實現簡單聊天室

前言：瞭解了概念之後就應該練練手啦，不然就是語言的巨人，行動的矮子啦

vue+element+echarts實現簡單巢狀餅圖+折線圖+巢狀圖

簡單的寫了幾個可能 常用的巢狀效果圖,大家可以參考一下、 npm install echarts html程式碼:

Vue入門實戰之天氣預報

本文例項為大家分享了實現天氣預報的具體程式碼，供大家參考，具體內容如下

JS實現簡單計數器

用HTML 和Swww.cppcns.comcript實現簡單計數器，有加、減和零三個按鈕，分別實現加一、減一和歸零操作。下面先看一下效果圖。

Go實戰--實現簡單的restful api

生命不止，繼續 Go go go !!! 今天跟大家介紹一下如何使用go建立一套restful api，我們依託於開源庫gorilla/mux。

基於node+vue實現簡單的WebSocket聊天功能

首先，我需要用到node的nodejs-websocket模組 使用yarn進行安裝 yarn add nodejs-websocket --save

vue.js實現簡單的計算器功能

使用vue.js來編寫一個簡單的計算器，供大家參考，具體內容如下 效果如圖所示：是一個十分簡單的計算器，包含了加減乘除，不是用原生js寫的，而是用vue.js寫的

使用Vue實現簡單計算器

使用Vue編寫簡單計算器，供大家參考，具體內容如下 在Vue中，v-model 指令，可以實現表單元素和 Model 中資料的雙向資料繫結，接下來，我們就用這個指令編寫一個簡單的計算器，程式碼如下

Vue實現簡單計算器案例

利用Vue.js寫的一個簡單的計算器。非常簡單的案例。 通過這個案例，練習一下Vue的語法。

vue實現簡單瀑布流佈局

vue簡單實現瀑布流佈局的一種方式（vue瀑布流元件），供大家參考，具體內容如下

Java基於jeeplus vue實現簡單工作流過程圖解

jeeplus 是一款基於程式碼生成器的快速開發平臺。 前後端分離、maven多模組開發，方便多人協同開發

Vue實現簡單的跑馬燈

Vue實現滾動字條/跑馬燈，供大家參考，具體內容如下 內容不多，直接看程式碼吧

vue實現簡單跑馬燈效果

本文例項為大家分享了vue實現簡單跑馬燈效果的具體程式碼，供大家參考，具體內容如下

vue實現簡單學生資訊管理

本文例項為大家分享了vue實現學生資訊管理的具體程式碼，供大家參考，具體內容如下

vue.js實現簡單購物車功能

本文例項為大家分享了vue.js實現簡單購物車的具體程式碼，供大家參考，具體內容如下

vue實現簡單圖片上傳

本文例項為大家分享了vue實現簡單圖片上傳的具體程式碼，供大家參考，具體內容如下

springboot+springsecurity+vue實現簡單的登陸認證

1、建立SecurityUser類，需要實現UserDetails介面 import lombok.Data; import lombok.EqualsAndHashCode;