快捷導(dǎo)航

vue數(shù)據(jù)操作之點(diǎn)擊事件實(shí)現(xiàn)num加減功能示例

更新時(shí)間：2019年01月19日 14:38:44 作者：黎成訶月

這篇文章主要介紹了vue數(shù)據(jù)操作之點(diǎn)擊事件實(shí)現(xiàn)num加減功能,結(jié)合實(shí)例形式分析了vue.js事件響應(yīng)及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了vue數(shù)據(jù)操作之點(diǎn)擊事件實(shí)現(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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Vue封裝數(shù)字框組件實(shí)現(xiàn)流程詳解
這篇文章主要介紹了Vue封裝數(shù)字框組件實(shí)現(xiàn)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2023-04-04
element帶輸入建議el-autocomplete的使用
本文主要介紹了element帶輸入建議el-autocomplete的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue中動(dòng)態(tài)select的使用方法示例
這篇文章主要介紹了vue中動(dòng)態(tài)select的使用方法,結(jié)合實(shí)例形式分析了vue.js使用動(dòng)態(tài)select創(chuàng)建下拉菜單相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
2019-10-10
Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼
本文主要介紹了Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問(wèn)題及優(yōu)化詳解
這篇文章主要介紹了Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問(wèn)題及優(yōu)化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
element plus tree拖動(dòng)節(jié)點(diǎn)交換位置和改變層級(jí)問(wèn)題(解決方案)
圖層list里有各種組件,用element plus的tree來(lái)渲染,可以把圖片等組件到面板里,面板是容器,非容器組件,比如圖片、文本等,就不能讓其他組件拖進(jìn)來(lái),這篇文章主要介紹了element plus tree拖動(dòng)節(jié)點(diǎn)交換位置和改變層級(jí)問(wèn)題(解決方案),需要的朋友可以參考下
2024-04-04
詳解10分鐘學(xué)會(huì)vue滾動(dòng)行為
本篇文章主要介紹了vue滾動(dòng)行為，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
Vue+ECharts實(shí)現(xiàn)中國(guó)地圖的繪制及各省份自動(dòng)輪播高亮顯示
這篇文章主要介紹了Vue+ECharts實(shí)現(xiàn)中國(guó)地圖的繪制以及拖動(dòng)、縮放和各省份自動(dòng)輪播高亮顯示,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-12-12
vue 引用自定義ttf、otf、在線字體的方法
這篇文章主要介紹了vue 引用自定義ttf、otf、在線字體的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
詳解Vue computed計(jì)算屬性是什么
在vue中，有時(shí)候你需要對(duì)data中的數(shù)據(jù)進(jìn)行處理，或者對(duì)抓取的數(shù)據(jù)進(jìn)行處理之后再掛載呈現(xiàn)到標(biāo)簽中，這時(shí)候你就需要計(jì)算屬性了，當(dāng)然看到這里你可能還是不了解那下面我舉幾個(gè)實(shí)例并附代碼解釋
2023-03-03