【轻松学vue】vue.js基础入门教程（五）v-for指令

v-for指令

根据一组数组的选项列表进行渲染。

<div id="app">
    <ul>
        <li v-for="(item,index) in items">
            {{index}}--{{item}}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            items:[1,2,3,4,5]
        }
    })
</script>

item：是数组的每一个值，index是数组的索引值，index不是必须的，需要用到时再加即可

渲染对象数据：

<div id="app">
    <ul>
        <li v-for="(person,key,index) in persons">
            {{index}}--{{key}}--{{person}}
        </li>
    </ul>
</div>
    
<script>
    var app = new Vue({
        el:"#app",
        data:{
            persons:{
                username:"zhangsan",
                age:28,
                sex:"男"
            }
        }
    })
</script>

person：对象的value值，key：对象的键值，index：对象的索引值

实际开发当中，一般需要列表渲染的数据是[{},{},{}]的格式

<div id="app">
    <ul>
        <li v-for="(person,key) in persons">
            {{key}}--姓名--{{person.username}}--年龄--{{person.age}}--性别--{{person.sex}}
        </li>
    </ul>
</div>
    
<script>
    var app = new Vue({
        el:"#app",
        data:{
            persons:[{
                    username:"zhangsan",
                    age:28,
                    sex:"男"
                },
                {
                    username:"lisi",
                    age:18,
                    sex:"女"
                },
                {
                    username:"王五",
                    age:18,
                    sex:"男"
                },
            ]
        }
    })
</script>

QQ：732005030
扫码加微信