怎么在Vue中實現數量加減運算

本篇文章給大家分享的是有關怎么在Vue中實現數量加減運算，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

HTML:

<div class="count3">
  <ul>
    <li v-for="(key,idx) in liList" :key="key.id">
      {{key.id}},{{idx}}
      <template>
        <button class="cut" @click="cuts(idx)">-</button>
          <span>{{key.num}}</span>
          <button class="add" @click="add(idx)">+</button>
      </template>
    </li>
  </ul>
  總數：{{total}}
</div>

JS:

var test=new Vue({
  el:".count3",
  data:{
    total:0,
    liList:[{
      id:0,
      num:0
    },{
      id:1,
      num:0
    },{
      id:2,
      num:0
    }]
  },
  methods:{
    cuts:function(idx){
      if(this.liList[idx].num<1) return
      this.liList[idx].num--;
      this.total--;
    },
    add:function(idx){
      this.liList[idx].num++;
      this.total++;
    }
  }
})

總結：

在vue2.x版本中，v-for的第二個參數是index即索引，并且后面使用時不用加$符號。

而vue1.x的index索引是在第一個參數，第二個參數才是對應值，而且后面使用時需要加$符號

vue2.x版本中 el 不能使用body

vue2.x:數組語法：

value in arr    或者   （value，index） in arr      使用或傳參時：{{index}}      @click="add(index)"函數接收時就能直接使用index

對象語法：

value in object  或者  (value,key,index) in object   value是值，key是鍵值，index是索引值，后面兩個都是可選

vue1.x:數組語法：

value in arr    或者   （index,value） in arr      使用或傳參時：{{$index}}      @click="add($index)"函數接收時就能直接使用$index

對象語法：

value in object  或者  (key,value) in object   value是值，key是鍵值

vue2.x中的key只支持 number 和 string 類型等primitive（原始） 類型，不支持object。

@click是v-on:的簡寫方式。

：key是v-bind：key的簡寫方式。官方給出加入key的解釋是：如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素

自己的理解：感覺和小程序中的wx：key=“”有點類似，加上key之后，表示獨一無二，在數據項順序改變的時候，比如刪除增加，就能跟蹤每個節點，從而重用和重新排序現有元素，不會出現渲染錯誤等情況。

在Vue2.2.0+ 的版本里，當在組件中使用 v-for 時，key 現在是必須的。

以上就是怎么在Vue中實現數量加減運算，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。