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>