vue實現(xiàn)計數(shù)器簡單制作
本文實例為大家分享了vue實現(xiàn)計數(shù)器簡單實現(xiàn)代碼，供大家參考，具體內(nèi)容如下
過程注意事項 創(chuàng)建vue實例時：el（掛載點）data（數(shù)據(jù)）methods（方法）。 v-on指令得作用是綁定事件，簡寫為@。 方法中通過this關(guān)鍵字獲取data中的數(shù)據(jù)。 v-text指令的作用是：設(shè)置元素的文本值，簡寫為{{}}。 v-html指令的作用是：設(shè)置元素的innerHTML。 實際代碼與截圖<html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>計數(shù)器</title></head><body> <div id='app'><!--計數(shù)器功能區(qū)域--><div class='input-num'> <button @click='sub'>- </button> <span>{{num}}</span> <button @click='add'>+ </button></div> </div><!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script><script> //vue實例 var app = new Vue({el:'#app', data: { num:1 }, methods: { add:function(){ //console.log(’add’) if(this.num<10){this.num++;}else{alert(’別點啦，最大了！’); } }, sub:function(){ //console.log(’sub’) if(this.num>0){this.num--;}else{alert(’別點啦，最小了！’); } } }, })</script></body></html>
關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. .NET6打包部署到Windows Service的全過程2. .Net Core和RabbitMQ限制循環(huán)消費的方法3. jsp EL表達式詳解4. 淺談SpringMVC jsp前臺獲取參數(shù)的方式 EL表達式5. Jsp中request的3個基礎(chǔ)實踐6. .NET使用YARP通過編碼方式配置域名轉(zhuǎn)發(fā)實現(xiàn)反向代理7. ASP 連接Access數(shù)據(jù)庫的登陸系統(tǒng)8. 如何在jsp界面中插入圖片9. 解析原生JS getComputedStyle10. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)
網(wǎng)公網(wǎng)安備