本文實例講述了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 現在是必須的。

感興趣的朋友可以使用如下工具測試上述代碼運行效果：

在線HTML/CSS/JavaScript代碼運行工具：
http://tools.VeVB.COm/code/HtmlJsRun

在線HTML/CSS/JavaScript前端代碼調試運行工具：
http://tools.VeVB.COm/code/WebCodeRun

希望本文所述對大家vue.js程序設計有所幫助。