Vue實(shí)現(xiàn)計(jì)數(shù)器案例
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)計(jì)數(shù)器展示的具體代碼，供大家參考，具體內(nèi)容如下
效果：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>計(jì)數(shù)器</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('達(dá)到最大啦!'); } },sub: function(){ if(this.num>0){this.num--; }else{alert('已經(jīng)沒(méi)有了!'); } } }}) </script></body></html> data中寫(xiě)需要用到的數(shù)據(jù)： num -methods中添加兩個(gè)方法：加(add)、減(sub) 使用v-text或者差值表達(dá)式將num設(shè)置給span標(biāo)簽 使用v-on：(簡(jiǎn)寫(xiě)，@)將add、sub分別綁定給+、-按鈕 累加的邏輯：小于10累加，否則提示 遞減的邏輯：大于0遞漸，否則提示 方法中通過(guò)this關(guān)鍵字獲取data中的數(shù)據(jù)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. UDDI FAQs2. 解析原生JS getComputedStyle3. 刪除docker里建立容器的操作方法4. 阿里前端開(kāi)發(fā)中的規(guī)范要求5. XML入門(mén)的常見(jiàn)問(wèn)題(一)6. css進(jìn)階學(xué)習(xí) 選擇符7. html小技巧之td,div標(biāo)簽里內(nèi)容不換行8. 概述IE和SQL2k開(kāi)發(fā)一個(gè)XML聊天程序9. XML解析錯(cuò)誤：未組織好 的解決辦法10. Echarts通過(guò)dataset數(shù)據(jù)集實(shí)現(xiàn)創(chuàng)建單軸散點(diǎn)圖
網(wǎng)公網(wǎng)安備