Vue.js v-forを使っていくつかの情報を順番に表示する
皆さんこんにちは、サーバーサイドエンジニアの大川です。今回はv-forを使って順にキーに紐づく値を表示してみようと思います！
やること
v-forディレクティブを用いて複数の情報を順番に表示する。
準備
下記の内容を任意のhtmlファイルに記載して保存します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<header></header>
<main>
<div id="app">
</div>
</main>
<footer></footer>
<script>
let app = new Vue({
el: '#app',
data(){
return {
}
},
})
</script>
</body>
</html>方法
まずscript要素内を編集して配列itemsを定義して、その中に「message」キーに紐づく「文字列1」と「文字列2」をそれぞれ定義します。
<script>
let app = new Vue({
el: '#app',
data(){
return {
items: [
{ message: '文字列1' },
{ message: '文字列2' }
]
}
},
})
</script>下記の内容をdiv要素内に記載します。
<div id="app">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>ファイル全体が下記の様になっていることを確認します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<header></header>
<main>
<div id="app">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>
</main>
<footer></footer>
<script>
let app = new Vue({
el: '#app',
data(){
return {
items: [
{ message: '文字列1' },
{ message: '文字列2' }
]
}
},
})
</script>
</body>
</html>コレで準備は完了です！当該のhtmlファイルをブラウザで開いてみると下記の様に「文字列1」と「文字列2」が表示されています。
また下記の様にv-forディレクティブを記載すると配列itemsの中の要素のインデクス番号を取得することができます。
<li v-for="(item, index) in items"></li>インデクス番号も表示できるように下記のように修正しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<header></header>
<main>
<div id="app">
<ul>
<li v-for="(item, index) in items">
インデックス番号が{{ index }}の値は{{ item.message }}
</li>
</ul>
</div>
</main>
<footer></footer>
<script>
let app = new Vue({
el: '#app',
data(){
return {
items: [
{ message: '文字列1' },
{ message: '文字列2' }
]
}
},
})
</script>
</body>
</html>下記のようにインデクス番号が表示されています。
今度はオブジェクトの内容をv-forディレクティブで順に表示してみましょう！下記の様にscript要素を修正します。（itemsオブジェクトを定義して「message1」キーには「文字列1」が、「message2」キーには「文字列2」が設定されている。）
<script>
let app = new Vue({
el: '#app',
data(){
return {
items: {
message1: '文字列1',
message2: '文字列2'
}
}
},
})
</script>div要素内を下記のように修正します。
<div id="app">
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>ファイル全体では下記のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<header></header>
<main>
<div id="app">
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>
</main>
<footer></footer>
<script>
let app = new Vue({
el: '#app',
data(){
return {
items: {
message1: '文字列1',
message2: '文字列2'
}
}
},
})
</script>
</body>
</html>すると下記のように表示されます。
これだけだとちょっとわかりにくい気がするので、script要素内のitemsオブジェクトを少しいじって情報を足してみましょう！下記のように書き換えてみました。
<script>
let app = new Vue({
el: '#app',
data(){
return {
items: {
name: '大川 峻',
age: '25',
company: 'アンテク'
}
}
},
})
</script>ファイル全体では下記のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<header></header>
<main>
<div id="app">
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>
</main>
<footer></footer>
<script>
let app = new Vue({
el: '#app',
data(){
return {
items: {
name: '大川 峻',
age: '25',
company: 'アンテク'
}
}
},
})
</script>
</body>
</html>htmlファイルを確認すると下記のように表示されています！
オブジェクトの場合、配列のインデックス番号を表示した時人同じ様にキー名を表示する事ができます。下記の様にdiv要素内を修正します。
<div id="app">
<ul>
<li v-for="(item, key) in items">
{{ key }}: {{ item }}
</li>
</ul>
</div>ファイル全体では下記の様になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<header></header>
<main>
<div id="app">
<ul>
<li v-for="(item, key) in items">
{{ key }}: {{ item }}
</li>
</ul>
</div>
</main>
<footer></footer>
<script>
let app = new Vue({
el: '#app',
data(){
return {
items: {
name: '大川 峻',
age: '25',
company: 'アンテク'
}
}
},
})
</script>
</body>
</html>ブラウザで確認すると下記のように表示されます！
また、下記のように記載することでオブジェクトであってもインデックス番号を取得・表示することも可能です。
<div id="app">
<ul>
<li v-for="(item, key, index) in items">
{{ index }}-{{ key }}: {{ item }}
</li>
</ul>
</div>下記のように表示されます。
下記の様に記載することで複数のオブジェクトをv-forで記載することもできます。
script要素
<script>
let app = new Vue({
el: '#app',
data(){
return {
items: [
{
id: 1,
name: '大川 峻',
age: '25',
company: 'アンテク'
},
{
id: 2,
name: 'XX XX',
age: 'XX',
company: 'アンテク'
},
{
id: 3,
name: 'YY YY',
age: 'YY',
company: 'アンテク'
},
{
id: 4,
name: 'ZZ ZZ',
age: 'ZZ',
company: 'アンテク'
}
],
}
},
})
</script>div要素
<div id="app">
<table>
<thead>
<tr>
<th>id</th>
<th>名前</th>
<th>年齢</th>
<th>会社</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.company }}</td>
</tr>
</tbody>
</table>
</div>ファイル全体
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<header></header>
<main>
<div id="app">
<table>
<thead>
<tr>
<th>id</th>
<th>名前</th>
<th>年齢</th>
<th>会社</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.company }}</td>
</tr>
</tbody>
</table>
</div>
</main>
<footer></footer>
<script>
let app = new Vue({
el: '#app',
data(){
return {
items: [
{
id: 1,
name: '大川 峻',
age: '25',
company: 'アンテク'
},
{
id: 2,
name: 'XX XX',
age: 'XX',
company: 'アンテク'
},
{
id: 3,
name: 'YY YY',
age: 'YY',
company: 'アンテク'
},
{
id: 4,
name: 'ZZ ZZ',
age: 'ZZ',
company: 'アンテク'
}
],
}
},
})
</script>
</body>
</html>下記のように表示されます！
