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

效果圖：

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的第二個(gè)參數(shù)是index即索引，并且后面使用時(shí)不用加$符號(hào)。

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

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

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

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

對(duì)象語(yǔ)法：

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

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

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

對(duì)象語(yǔ)法：

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

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

@click是v-on:的簡(jiǎn)寫方式。

：key是v-bind：key的簡(jiǎn)寫方式。官方給出加入key的解釋是：如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素

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

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

感興趣的朋友可以使用如下工具測(cè)試上述代碼運(yùn)行效果：

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

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

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

最新評(píng)論