vueJS

【VueJS】v-forディレクティブで配列データをインデックスと合わせてテーブルで表示する

この記事は約2分で読めます。

 

 

v-forディレクティブで配列データをインデックスと合わせて表示する方法についてサンプルコードと合わせて紹介します。

 

v-forディレクティブで配列データをインデックスと合わせて表示する

 

 <html>
<head>
<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js” ></script>
</head>

<body>
<div id=”app”>
<p v-for=”(value, index) in list”>

{{ index+1 }}{{ value.text }}

</p>
</div>
</body>

</html>

<script>
var app = new Vue({
el: ‘#app’,
data: {
list: [
{ text: ‘リスト1’ },
{ text: ‘リスト2’ },
{ text: ‘リスト3’ }
]
}
})
</script>

 

まずは、Vueインスタンス内で下記のように連想配列で、キー:値の配列データをVueインスタンスのdataに作ります。

 

data: {
list: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}

 

そして、html側では、htmlタグの属性にv-forを追加して、「v-for=(要素, index) in 配列」でループ処理します。その後、{{ index+1 }} {{ 要素(キー).値 }}で、データとインデックスを1つずつ表示しています。

 

ちなみにJSはインデックスが0から始まるので+1としています。

 

 

参照:https://johobase.com/vue-js-v-for-directive/

 

コメント

  1. […] 関連記事:【VueJS】v-forディレクティブで配列データをインデックスと合わせてテーブルで表示する […]

タイトルとURLをコピーしました