vue.js知識點總結（七）列表渲染

 

1、用 v-for 把一個數組對應爲一組元素,用 v-for指令根據一組數組的選項列表進行渲染，簡單的說就是循環使用v-for。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組並且 item 是數組元素迭代的別名。在 v-for 塊中，我們擁有對父作用域屬性的完全訪問權限。v-for 還支持一個可選的第二個參數爲當前項的索引。

 

用 v-for 把一個數組對應爲一組元素

我們用 v-for 指令根據一組數組的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組並且 item 是數組元素迭代的別名。

 

 <!-- 使用v-for進行循環渲染 -->
    <div id="app">
        <ul>
            <li v-for="item in items">
                {{item.name}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
           el:"#app",
           data:{
            items:[
                {name:"pangtong"},
                {name:"yantong"},
                {name:"xiaotong"}
            ]
           } 
        })
    </script>

 

2、v-for迭代對象，v-for可以通過一個對象的屬性來迭代對象，也可以提供第二個參數是鍵名，第三個參數是索引

 

 

 <!-- v-for迭代對象 -->
    <div id="app">
        <ul>
            <li v-for="value in object">
                {{value}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                object:{
                    name:"pangtong",
                    sex:"女"
                }
            }
        })
    </script>

 

 

<!-- v-for迭代對象,也可以提供第二個參數是鍵名-->
    <div id="app">
        <ul>
            <li v-for="(value,key) in object">
                {{key}}-{{value}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                object:{
                    name:"pangtong",
                    sex:"女"
                }
            }
        })
    </script>

 

<!-- v-for迭代對象,也可以提供第二個參數是鍵名，第三個參數是索引-->
    <div id="app">
        <ul>
            <li v-for="(value,key,index) in object">
                {{index}}-{{key}}-{{value}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                object:{
                    name:"pangtong",
                    sex:"女"
                }
            }
        })
    </script>

 

3、v-for也可以迭代整數

 

 

 <!-- v-for也可以迭代整數 -->
    <div id="app">
        <ul>
            <li v-for="n in 10">
                {{n}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app"
        })
    </script>

 

4、v-for還可以循環數組

 

 

<!-- v-for還可以循環數組 -->
    <div id="app">
        <ul>
            <li v-for="n in [1,3,5,6]">
                {{n}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
        })
    </script>

5、v-for 如果要迫使其重新排序的元素，需要提供一個 key 的特殊屬性

 

eg:<div v-for="item in items" :key="item.id">{{ item.text }}</div>