当前位置 > it书童 > vue > 正文

vue 循环结构 v-for

vue it书童 2019-10-04 20:16:33 0赞 0踩 670阅读 0评论

用于循环的数组里面的值可以是对象,也可以是普通元素

<div id="app">
    <ul>
        <li v-for="(val,key) in arr">{{val}}---{{key}}</li>
    </ul>
    <ul>
        <li v-for="(val,key) in obj">{{val}}---{{key}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            arr: ['a', 'b', 'c'],
            obj: { id: 1, name: '李四' }
        },
    })
</script>

:key 的作用:

  • key来给每个节点做一个唯一标识

  • key的作用主要是为了高效的更新虚拟DOM

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

v-for

关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
转载须注明出处:https://www.itshutong.com/articles/225/v-for-cycle