VUE中v-for循環四種數據，以及相關參數順序，以及v-for的注意事項

vue中的v-for可以循環四種數據，分別是，數字，字符串，數組，對象

首先，v-for是屬性，是對元素屬性的擴展。記得，是v-for=""，而不是 v-for:"".
接着，在v-for屬性的值是表達式，里面的參數，用逗號，而不是用空格隔開。

一：v-for循環數字

<li v-for='num in 10'>{{ num }}</li>

二：v-for循環字符串

<li v-for="str in 'haha'">{{ str }}</li>

三：v-for循環數組

<div id="test">
        <ul>
            <li v-for='(item,index) in arr'>{{ item }}---{{ index }}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: "#test",
            data: {
                arr: ['apple', 'orange', 'banana'],
            }
        })
    </script>

上面的item，index是語義化的寫法，不是固定的，可以是a,b,c這樣的，順序就是數組內容，數組索引

四：v-for循環對象

<div id="test">
        <ul>
            <li v-for='(value,key,index) in obj'>{{ value }}---{{ key }}---{{ index }}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: "#test",
            data: {
                obj: {
                    name: "zhangsan",
                    age: 18,
                    sex: '男'
                }
            }
        })
    </script>

第一個是值，第二個是鍵，第三個是索引

關於數組和對象中參數順序的解釋

1.所有的循環，首要目的都是為了獲取元素的值
2.其次是元素的鍵
3.最后是元素的索引
可以依靠這個規則來記憶參數的順序