溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“Vue如何實現計數器”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue如何實現計數器”這篇文章吧。
具體內容如下
效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>計數器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> #app{ text-align: center; margin: 0 auto; line-height: 500px; } #app input{ width: 50px; height: 40px; font-size: 20px; border-radius: 5px; outline: none; /* 自定義邊框 */ border: 1px solid transparent; background-color: blue; line-height: 30px; color: white; } #app span{ padding: 20px 20px; border: 1px; } </style> </head> <body> <div id="app"> <input type="button" value="-" @click="sub"/> <span>{{num}}</span> <input type="button" value="+" @click="add"/> </div> <script> var app = new Vue({ el: "#app", data: { num: 1 }, methods:{ add: function(){ if(this.num<10){ this.num++; }else{ alert("達到最大啦!"); } }, sub: function(){ if(this.num>0){ this.num--; }else{ alert("已經沒有了!"); } } } }) </script> </body> </html>
data中寫需要用到的數據： num
-methods中添加兩個方法：加(add)、減(sub)
使用v-text或者差值表達式將num設置給span標簽
使用v-on：(簡寫，@)將add、sub分別綁定給+、-按鈕
累加的邏輯：小于10累加，否則提示
遞減的邏輯：大于0遞漸，否則提示
方法中通過this關鍵字獲取data中的數據
以上是“Vue如何實現計數器”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
