冰球突破什么时间段爆大奖

書名： 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將一組數據渲染到頁面中，這一組數據可以是數組，抑或是對象。

官术网_书友最值得收藏!

Vue.js從入門到項目實踐（超值版）

4.2.2 列表渲染

4.2.2　列表渲染