vue數(shù)據(jù)操作之點擊事件實現(xiàn)num加減功能示例
更新時間:2019年01月19日 14:38:44 作者:黎成訶月
這篇文章主要介紹了vue數(shù)據(jù)操作之點擊事件實現(xiàn)num加減功能,結(jié)合實例形式分析了vue.js事件響應(yīng)及數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了vue數(shù)據(jù)操作之點擊事件實現(xiàn)num加減功能。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue num加減</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <button v-on:click="add(10)">click me</button> <button v-on:click="remove(5)">click me</button> <button v-on:click="num++">click me</button> <button v-on:click="num--">click me</button> <span>{{num}}</span> </div> <script> new Vue({ el: '#app', data: { num:0, message: '6', data: { name: '', gender: '', interest: [], identity: '' }, selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] }, methods:{ add:function (inc){ this.num += inc; }, remove:function (dec){ this.num -= dec; }, } }) </script> </body> </html>
這里使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼,可得如下運行結(jié)果:
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
element帶輸入建議el-autocomplete的使用
本文主要介紹了element帶輸入建議el-autocomplete的使用,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼
本文主要介紹了Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-05-05Vue優(yōu)化:常見會導致內(nèi)存泄漏問題及優(yōu)化詳解
這篇文章主要介紹了Vue優(yōu)化:常見會導致內(nèi)存泄漏問題及優(yōu)化詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08element plus tree拖動節(jié)點交換位置和改變層級問題(解決方案)
圖層list里有各種組件,用element plus的tree來渲染,可以把圖片等組件到面板里,面板是容器,非容器組件,比如圖片、文本等,就不能讓其他組件拖進來,這篇文章主要介紹了element plus tree拖動節(jié)點交換位置和改變層級問題(解決方案),需要的朋友可以參考下2024-04-04Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示
這篇文章主要介紹了Vue+ECharts實現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12