怎么在Vue中實(shí)現(xiàn)數(shù)量加減運(yùn)算

  

    
      {{key.id}},{{idx}}
      
    
  
  總數(shù)：{{total}}

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++;
    }
  }
})

總結(jié)：

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

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

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

vue2.x:數(shù)組語法：

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

對象語法：

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

vue1.x:數(shù)組語法：

value in arr    或者   （index,value） in arr      使用或傳參時：{{$index}}      @click="add($index)"函數(shù)接收時就能直接使用$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的解釋是：如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序， 而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素

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

在Vue2.2.0+ 的版本里，當(dāng)在組件中使用 v-for 時，key 現(xiàn)在是必須的。

以上就是怎么在Vue中實(shí)現(xiàn)數(shù)量加減運(yùn)算，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。