Vue.js中v-for列表渲染指令的使用方法

這篇文章主要介紹Vue.js中v-for列表渲染指令的使用方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

v-for指令

Vuejs為我們提供了一個(gè)v-for指令，用于將項(xiàng)目列表渲染到dom中。

v-for指令的語法

v-for="user in users"
<!-- user variable is iterator -->
<!--users is data array-->

示例

<template>
 <ul>
   <!-- list rendering starts -->
  <li v-for="user in users">{{user.name}}</li>
 </ul>
</template>

<script>
 export default{
     data:function(){
         return{
             users:[
                 {id:1,name:"king"},
                 {id:2,name:"gowtham"},
                 {id:3,name:"ooops"},
             ]
         }
     }
 }
</script>

在上面的代碼中，我們使用v-for指令循環(huán)遍歷users數(shù)組，這樣在每次循環(huán)中user變量都指向數(shù)組中出現(xiàn)的不同對象。

key屬性

當(dāng)使用v-for指令時(shí)，我們需要向該元素添加一個(gè)key屬性，因?yàn)?code>vuejs需要根據(jù)提供的key跟蹤列表項(xiàng)。

注意:密鑰應(yīng)該是唯一的

讓我們將key屬性添加到模板中。

<template>
 <ul>
  <li v-for="user in users" :key="user.id">
    {{user.name}}
  </li>
 </ul>
</template>

<script>
 export default{
     data:function(){
         return{
             users:[
                 {id:1,name:"king"},
                 {id:2,name:"gowtham"},
                 {id:3,name:"ooops"},
             ]
         }
     }
 }
</script>

在users數(shù)組中，id屬性對每個(gè)對象都是唯一的，因此我們將它傳遞給key屬性。

我們還可以訪問數(shù)組中每個(gè)項(xiàng)的索引。

<template>
<ul>
  <li v-for="(user,index) in users" :key="user.id">
    {{user.name}} {{index}}
  </li>
 </ul>
</template>

遍歷對象

我們還可以通過使用v-for指令循環(huán)JavaScript對象。

<template>
  <ul>
    <!-- accessing `value and key` present in person object -->
    <li v-for="(value, key) in person" :key="key">
      {{key}} : {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data: function() {
    return {
      person: {
        firstName: "Rim",
        lastName: "Doe",
        age: 20,
        eyeColor: "blue"
      }
    };
  }
};
</script>

注意:在對象中，我們需要先提取value，然后是key。

以上是Vue.js中v-for列表渲染指令的使用方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！