亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)文章

  • Vue封裝數(shù)字框組件實現(xiàn)流程詳解

    Vue封裝數(shù)字框組件實現(xiàn)流程詳解

    這篇文章主要介紹了Vue封裝數(shù)字框組件實現(xiàn)流程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧
    2023-04-04
  • element帶輸入建議el-autocomplete的使用

    element帶輸入建議el-autocomplete的使用

    本文主要介紹了element帶輸入建議el-autocomplete的使用,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue中動態(tài)select的使用方法示例

    vue中動態(tài)select的使用方法示例

    這篇文章主要介紹了vue中動態(tài)select的使用方法,結(jié)合實例形式分析了vue.js使用動態(tài)select創(chuàng)建下拉菜單相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下
    2019-10-10
  • Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼

    Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼

    本文主要介紹了Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-05-05
  • Vue優(yōu)化:常見會導致內(nèi)存泄漏問題及優(yōu)化詳解

    Vue優(yōu)化:常見會導致內(nèi)存泄漏問題及優(yōu)化詳解

    這篇文章主要介紹了Vue優(yōu)化:常見會導致內(nèi)存泄漏問題及優(yōu)化詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • element plus tree拖動節(jié)點交換位置和改變層級問題(解決方案)

    element plus tree拖動節(jié)點交換位置和改變層級問題(解決方案)

    圖層list里有各種組件,用element plus的tree來渲染,可以把圖片等組件到面板里,面板是容器,非容器組件,比如圖片、文本等,就不能讓其他組件拖進來,這篇文章主要介紹了element plus tree拖動節(jié)點交換位置和改變層級問題(解決方案),需要的朋友可以參考下
    2024-04-04
  • 詳解10分鐘學會vue滾動行為

    詳解10分鐘學會vue滾動行為

    本篇文章主要介紹了vue滾動行為,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示

    Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示

    這篇文章主要介紹了Vue+ECharts實現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-12-12
  • vue 引用自定義ttf、otf、在線字體的方法

    vue 引用自定義ttf、otf、在線字體的方法

    這篇文章主要介紹了vue 引用自定義ttf、otf、在線字體的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • 詳解Vue computed計算屬性是什么

    詳解Vue computed計算屬性是什么

    在vue中,有時候你需要對data中的數(shù)據(jù)進行處理,或者對抓取的數(shù)據(jù)進行處理之后再掛載呈現(xiàn)到標簽中,這時候你就需要計算屬性了,當然看到這里你可能還是不了解那下面我舉幾個實例并附代碼解釋
    2023-03-03

最新評論