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í)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python GUI庫圖形界面開發(fā)之PyQt5動態(tài)(可拖動控件大小)布局控件QSplitter詳細(xì)使用方法與實例2. vue跳轉(zhuǎn)頁面常用的幾種方法匯總3. 不要在HTML中濫用div4. ASP 處理JSON數(shù)據(jù)的實現(xiàn)代碼5. js開發(fā)中的頁面、屏幕、瀏覽器的位置原理（高度寬度）說明講解（附圖）6. CSS清除浮動方法匯總7. XML 非法字符（轉(zhuǎn)義字符）8. 父div高度不能自適應(yīng)子div高度的解決方案9. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)10. XML入門的常見問題(三)
網(wǎng)公網(wǎng)安備