Vue.js での v-for リスト レンダリング命令の使用 (コード例)

この記事では、vuejs で配列をループし、項目のリストをレンダリングする方法を紹介します。困っている友人の役に立てば幸いです。

##v-for<strong></strong>ディレクティブ

Vuejs が提供するもの項目のリストを dom にレンダリングするための v-for ディレクティブを使用します。

v-for<strong></strong> ディレクティブの構文

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 命令を使用して users 配列をループし、各ループで user 変数が異なるオブジェクトを指すようにしています。配列に表示されるもの。

key<strong></strong>Attribute

v-for# を使用する場合## ディレクティブでは、vuejs は指定された key に基づいてリスト項目を追跡する必要があるため、要素に key 属性を追加する必要があります。 注: キーは一意である必要があります。

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

配列では、id 属性は各オブジェクトに一意であるため、それを key 属性に渡します。 配列内の各項目のインデックスにアクセスすることもできます。

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

オブジェクトの反復処理

v-for

ディレクティブを使用して、JavaScript オブジェクトをループすることもできます。 <pre class="brush:php;toolbar:false">&lt;template&gt; &lt;ul&gt; &lt;!-- accessing `value and key` present in person object --&gt; &lt;li v-for=&quot;(value, key) in person&quot; :key=&quot;key&quot;&gt; {{key}} : {{ value }} &lt;/li&gt; &lt;/ul&gt; &lt;/template&gt; &lt;script&gt; export default { data: function() { return { person: { firstName: &quot;Rim&quot;, lastName: &quot;Doe&quot;, age: 20, eyeColor: &quot;blue&quot; } }; } }; &lt;/script&gt;</pre>

注: オブジェクトでは、最初に

value

を抽出し、次に key を抽出する必要があります。 この記事は、Vue.js での v-for リスト レンダリング命令の使用について説明しています。困っている友人の役に立てば幸いです。

以上がVue.js での v-for リスト レンダリング命令の使用 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。