vue 的v-for 循環

v-for

1、普通數組
<p v-for="v in list">{{ v }}</p>
<p v-for="(v,k) in list">索引值：{{k}} 數值：{{ v }}</p>

2、索引數組
<p v-for="(v,k) in list2">id值{{ v.id }}=>{{ v.name }}</p>

3、對象數組
<p v-for="(val,key,i) in user ">{{key}}=》{{ val }} 下標{{i}}</p>
4、使用v-for 迭代數字
<p v-for='count in 10'> 這是第{{ count }} 次循環</p>
《-注意：如果使用 v-for 迭代數字的話 前面的count 值從1開始-》
<script>
    //創建Vue實例
    var vm = new Vue({
        el:'#app',
        data:{
            list:[1,2,3,4,5,6],
            list2:[
                {id:001,name:'red'},
                {id:002,name:'green'},
                {id:003,name:'blue'},
            ],
            user:{
                id:1,
                name : '托尼，仕達克',
                sex:'32',
            }
        },
        methods:{
        }
    })
</script>

5.在組件中使用v-for時，key現在是必須的
當Vue.js用v-for正在更新已渲染過的元素列表時，她默認用“就地復用策略”
vue將不是移動DOM元素來匹配數據項的順序，而是簡單復用此處每個元素。
為了給Vue一個提示，以便她能跟蹤每個節點的身份，從而重用和重新排序現有元素
<div id="app">
    <div>
        <label >Id:
            <input type="text" v-model="id">
        </label>
        <label >Name:
            <input type="text" v-model="name">
        </label>

        <input type="button" value="添加" @click="add">
    </div>
    <!--注意：v-for循環的時候 key 屬性只能使用 number 或 string-->
    <!--注意：key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定key的值-->
    <!--在組建使用v-for循環的時候或者在一些特殊情況中，如果 v-for 有問題，必須在使用
    v-for的同時，指定唯一的字符串/數字類型 :key 值-->
    <p v-for="item in list2" :key="item.id">
        <input type="checkbox">
        {{item.name}}
    </p>
</div>
<script>
    //創建Vue實例
    var vm = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            list2:[
                {id:001,name:'李斯'},
                {id:002,name:'始皇帝'},
                {id:003,name:'趙高'},
                {id:004,name:'韓非子'},
                {id:005,name:'荀子'},
            ],
        },
        methods:{
            add(){
                this.list2.unshift({id:this.id,name:this.name})
            }
        }
    })
</script>