Vue.javascript源码分析(十八)指令篇v-for指令详解

金灿灿的朝晖,渐渐染红了东方的天际,高高的黄山主峰被灿烂的云霞染成一片绯红。太阳在朝霞的迎接中,露出了红彤彤的面庞,霎时,万道金光透过树梢给水面染上了一层胭脂红。

我们可以用 v-for 指令基于一个数组or对象来渲染一个列表,有五种使用方法,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <script>
        Vue.config.productionTip=false;
        Vue.config.devtools=false;
    </script>
    <div id="app">
        <p v-for="item in items">{{item}}</p>                                   <!--数组格式一,渲染结果:<p>11</p><p>12</p>    -->         
        <p v-for="(item,index) in items">{{index}}->{{item}}</p>                <!--数组格式二,渲染结果:<p>0->11</p><p>1->12</p>-->
        <p v-for="item in infos">{{item}}</p>                                   <!--对象格式一,渲染结果:<p>gege</p><p>12</p>-->
        <p v-for="(item,key) in infos">{{key}}:{{item}}</p>                     <!--对象格式二,渲染结果:<p>name:gege</p><p>age:12</p>-->
        <p v-for="(item,key,index) in infos">{{index}}:{{key}}:{{item}}</p>     <!--对象格式三,渲染结果:<p>0:name:gege</p><p>1:age:12</p>-->
    </div>
    <script>
        var app = new Vue({
            data(){
                return {
                    items:[11,12],                        //v-for可以是个对象
                    infos:{name:'gege',age:12}            //也可以是个数组
                }
            },
            el:'#app'
        })
    </script> 
</body>
</html>

本文Vue.javascript源码分析(十八)指令篇v-for指令详解到此结束。当你能飞的时候就不要抛却飞。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

vue如何实现列表固定列滚动

vue如何实现伸缩菜单功能

vue项目中canvas如何实现截图功能