14-Vue核心-列表渲染-526互联

使用 v-for 做列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表，用于展示列表数据。

语法：

v-for = "(item, index) in items" :key="xxx" 或者 v-for = "(item, index) of items" :key="xxx"

这里可以使用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法。

:key 动态绑定key，可以理解为index，是遍历对象的唯一标识。

v-for 可以遍历以下类型：

1）遍历数组

<!--  遍历数组  -->
<h2>人员列表(遍历数组，用的多)</h2>
<ul>
    <!--  v-for 用于展示列表数据  -->
    <!--  :key 动态绑定key，可以理解为index，是遍历对象的唯一标识  -->
    <li v-for="(p,index) in persons" :key="index">
        姓名：{{p.name}}  年龄：{{p.age}}
    </li>
</ul>

 new Vue({
                el:"#root",
                data(){
                    return{
                        persons:[
                            {id:"001",name:"马铃薯1",age:20},
                            {id:"002",name:"马铃薯2",age:21},
                            {id:"003",name:"马铃薯3",age:22}
                        ]
                    }
                }
            })

2）遍历对象

<!--  遍历对象  -->
<h2>汽车信息(遍历对象)</h2>
<ul>
    <li v-for="(value,k) in car" :key="k">
        {{k}} : {{value}}
    </li>
</ul>

new Vue({
                el:"#root",
                data(){
                    return{
                        car:{
                            name:"奥迪A4L",
                            price:"27万",
                            color:"白色"
                        }
                    }
                }
            })

3）遍历字符串（用的少）

<!--  遍历字符串  -->
<h2>测试遍历字符串(用的少)</h2>
<ul>
    <li v-for="(value,index) in str" :key="index">
        {{index}} : {{value}}
    </li>
</ul>

new Vue({
                el:"#root",
                data(){
                    return{
                        str:"马铃薯的测试"
                    }
                }
            })

4）遍历指定次数（用的少）

<!--  遍历指定次数  -->
<h2>测试遍历指定次数(用的少)</h2>
<ul>
    <li v-for="(number,index) in 5" :key="index">
        {{index}} : {{number}}
    </li>
</ul>

基本列表渲染案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本列表</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            <!--  遍历数组  -->
            <h2>人员列表(遍历数组，用的多)</h2>
            <ul>
                <!--  v-for 用于展示列表数据  -->
                <!--  :key 动态绑定key，可以理解为index，是遍历对象的唯一标识  -->

                <!--<li v-for="p in persons" :key="p.id">-->
                <!--    姓名：{{p.name}}  年龄：{{p.age}}-->
                <!--</li>-->
                <li v-for="(p,index) in persons" :key="index">
                    姓名：{{p.name}}  年龄：{{p.age}}
                </li>
            </ul>
            <!--  遍历对象  -->
            <h2>汽车信息(遍历对象)</h2>
            <ul>
                <li v-for="(value,k) in car" :key="k">
                    {{k}} : {{value}}
                </li>
            </ul>
            <!--  遍历字符串  -->
            <h2>测试遍历字符串(用的少)</h2>
            <ul>
                <li v-for="(value,index) in str" :key="index">
                    {{index}} : {{value}}
                </li>
            </ul>
            <!--  遍历指定次数  -->
            <h2>测试遍历指定次数(用的少)</h2>
            <ul>
                <li v-for="(number,index) in 5" :key="index">
                    {{index}} : {{number}}
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false

            new Vue({
                el:"#root",
                data(){
                    return{
                        persons:[
                            {id:"001",name:"马铃薯1",age:20},
                            {id:"002",name:"马铃薯2",age:21},
                            {id:"003",name:"马铃薯3",age:22}
                        ],
                        car:{
                            name:"奥迪A4L",
                            price:"27万",
                            color:"白色"
                        },
                        str:"马铃薯的测试"
                    }
                }
            })
        </script>

    </body>
</html>