vue實(shí)現(xiàn)計(jì)數(shù)器簡(jiǎn)單制作
本文實(shí)例為大家分享了vue實(shí)現(xiàn)計(jì)數(shù)器簡(jiǎn)單實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
過程注意事項(xiàng) 創(chuàng)建vue實(shí)例時(shí)：el（掛載點(diǎn)）data（數(shù)據(jù)）methods（方法）。 v-on指令得作用是綁定事件，簡(jiǎn)寫為@。 方法中通過this關(guān)鍵字獲取data中的數(shù)據(jù)。 v-text指令的作用是：設(shè)置元素的文本值，簡(jiǎn)寫為{{}}。 v-html指令的作用是：設(shè)置元素的innerHTML。 實(shí)際代碼與截圖<html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>計(jì)數(shù)器</title></head><body> <div id='app'><!--計(jì)數(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實(shí)例 var app = new Vue({el:'#app', data: { num:1 }, methods: { add:function(){ //console.log(’add’) if(this.num<10){this.num++;}else{alert(’別點(diǎn)啦，最大了！’); } }, sub:function(){ //console.log(’sub’) if(this.num>0){this.num--;}else{alert(’別點(diǎn)啦，最小了！’); } } }, })</script></body></html>
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP.NET MVC實(shí)現(xiàn)下拉框多選2. JSP中param動(dòng)作的實(shí)例詳解3. Jsp servlet驗(yàn)證碼工具類分享4. .NET中的MassTransit分布式應(yīng)用框架詳解5. 解決request.getParameter取值后的if判斷為NULL的問題6. .NET Framework各版本(.NET2.0 3.0 3.5 4.0)區(qū)別7. .Net反向代理組件Yarp用法詳解8. ASP.NET MVC增加一條記錄同時(shí)添加N條集合屬性所對(duì)應(yīng)的個(gè)體9. 刪除docker里建立容器的操作方法10. 詳解如何使用Net將HTML簡(jiǎn)歷導(dǎo)出為PDF格式
網(wǎng)公網(wǎng)安備