本文實例講述了Vue入門之數(shù)量加減運算操作。分享給大家供大家參考，具體如下：

效果圖：

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>
  總數(shù)：{{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++;
    }
  }
})

總結(jié)：

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

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

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ù)項的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序， 而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素

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

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

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

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

在線HTML/CSS/JavaScript前端代碼調(diào)試運行工具：
http://tools.jb51.net/code/WebCodeRun

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

最新評論