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

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

藏色散人

リリース： 2019-03-30 09:58:09

オリジナル

3297 人が閲覧しました

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

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

##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 変数が異なるオブジェクトを指すようにしています。配列に表示されるもの。

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

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 オブジェクトをループすることもできます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><template> <ul>  <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></pre><div class="contentsignin">ログイン後にコピー</div></div></p> <p><img src="https://img.php.cn/upload/image/379/942/871/1553910180918947.png" title="1553910180918947.png" alt="Vue.js での v-for リストレンダリング命令の使用 (コード例)">注: オブジェクトでは、最初に </p>value<p> を抽出し、次に <code>key を抽出する必要があります。この記事は、Vue.js での v-for リストレンダリング命令の使用について説明しています。困っている友人の役に立てば幸いです。

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