初學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 現在是必須的。