4.2.2 列表渲染_Vue.js从入门到项目实践（超值版）-QQ阅读男生玄幻网

书名：Vue.js从入门到项目实践（超值版）
作者名：聚慕课教育研发中心编著
本章字数：493字
更新时间：2022-07-29 14:27:42

4.2.2　列表渲染

列表渲染：用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要采用item in items形式的特殊语法，其中items是源数据数组且是数组元素迭代的别名。

代码如下：

    <div class="app">
       <ul>
         <li v-for="item in items">{{item.text}}</li>
       </ul>
    </div>
    <script>
       data:{
         items:[
           {text:"name"},
           {text:"age"},
           {text:"like"}
         ]
       }
    </script>

渲染结果如下所示。

    <div class="exp">
       <ul>
           <li>name</li>
           <li>age</li>
           <li>like</li>
       </ul>
    </div>

v-for还支持一个可选的第二个参数为当前项的索引。代码如下：

    <div class="exp">
       <ul>
         <li v-for="item,index in items">{{index}}-{{item.text}}</li>
       </ul>
    </div>
    <script>
       var exp=new Vue({
         el:".exp",
         data:{
           items:[
             {text:'name'},
             {text:'age'},
             {text:'like'}
           ]
         }
       })
    </script>

运行的效果如图4-10所示。

图4-10　v-for运行效果图（一）

可以使用v-for通过一个对象的属性来迭代。代码如下：

    <div class="app">
       <ul>
         <li v-for="value in obj">{{value}}</li>
       </ul>
    </div>
    <script>
       var vm=new Vue({
         el:".app",
         data:{
           obj:{
             firstname:"欧阳",
             lastname:"静静",
             age:18
           }
         }
       })
    </script>

运行的效果如图4-11所示。

图4-11　v-for运行效果图（二）

当v-for与v-if一起使用时，v-for具有比v-if更高的优先级，这意味着v-if将分别重复运行于每个v-for循环中。为某些项目渲染节点时，运用v-for与v-if较多。代码如下：

    <li v-for="todo in todos" v-if="!todo.isComplete">
       {{ todo }}
    </li>

而如果想要有条件地跳过循环执行，那么可以将v-if置于外层元素（或<template>）上。代码如下：

    <ul v-if="todos.length">
       <li v-for="todo in todos">
       {{ todo }}
       </li>
    </ul>
    <p v-else>No todos!</p>

在Vue 2.2.0以上的版本中，如果要在组件中使用v-for，必须使用key。代码如下：

    <my-component v-for="(item,index) in itmes" v-bind:key="index"></my-component>

虽然在自定义组件中可以使用v-for，但是，v-for不能自动传递数据到组件中，因为组件有自己独立的作用域。为了传递迭代数据到组件中，需要使用props。代码如下：

下面用详细的代码介绍列表渲染。

Vue的列表渲染其实就是通过指令v-for将一组数据渲染到页面中，这一组数据可以是数组，抑或是对象。