vue.js入門6
はじめに
vue.jsの入門6です。 今回は、section2-3の続きで対象は以下の内容になります。
- templateタグ
- v-for
templateタグ
templateタグとは
複数のタグをまとめておくのに使うようなものです。 実際にはタグでくくられることになりますが、このタグ自身は表示されないものです。
実装
以下にtemplateタグを使った実装をしてみます。
<!DOCTYPE html>
<html>
<head>
<title>v-html template</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>template test</h1>
<div id="app">
<template v-if="flag">
<p>表示その1</p>
</template>
<template v-else>
<p>表示その2</p>
<ui>
<li>apple</li>
<li>banana</li>
</ui>
</template>
</div>
<button onclick="changeTemplate();">
change
</button>
<script>
var data = {
flag: true
}
new Vue({
el: '#app',
data: data
})
function changeTemplate() {
data.flag = !data.flag;
}
</script>
</body>
</html>
画面の表示
初期表示
ボタンを押すと
以下のようにtemplateタグのv-elseに囲まれた部分のHTMLに切り替わりました。
HTMLの要素は？
ここでタグが表示されていないかを確認するためにHTMLの要素を覗いてみます。
以下のようにタグは見当たりません。
v-for
構文
以下のような構文になります。
v-for="変数 in 配列"
実装
ここでv-forを使った実装をしてみます。
<!DOCTYPE html>
<html>
<head>
<title>v-html</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>v-for test</h1>
<div id="app">
<ui v-for="item in items">
<li>{{item.name}}</li>
</ui>
</div>
<script>
var data = {
items: [
{ name: "apple" },
{ name: "banana" },
{ name: "rice" }
]
}
new Vue({
el: '#app',
data: data
})
</script>
</body>
</html>
画面を表示
以下のように表示されました。
v-forの部分が期待どおり動き、リスト表示されました。
さらにv-forでインデックス番号を取得する
v-forしたときにインデックスを取得する方法もあります。
構文
先程のv-forから少し変わる感じで以下のようになります。
v-for="(要素,index) in 配列"
実装
実装は以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>v-html</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>v-for index test</h1>
<div id="app">
<ui v-for="(item, i) in items">
<li>{{i}}番目{{item.name}}</li>
</ui>
</div>
<script>
var data = {
items: [
{ name: "apple" },
{ name: "banana" },
{ name: "rice" }
]
}
new Vue({
el: '#app',
data: data
})
</script>
</body>
</html>
ちょっと間違えたのがindexを取得する部分で以下のような間違えをしました。
<ui v-for="(item, i) in items">
<li>{{item.i}}番目{{item.name}}</li>
</ui>
※item.iというようにインデックスを取ろうとしていますがこれだと取れない
以下のようにするととれるという感じです。
<ui v-for="(item, i) in items">
<li>{{i}}番目{{item.name}}</li>
</ui>
※indexは要素.indexではなく、indexのみで取れる
画面表示
以下のようにindex0から表示されることを確認しました。
まとめ
section2-3のまとめです。全体としては以下のことを実践しました。
- {{}}を使った
- 変数が使えるv-bind
- v-if、v-forという制御がある
次回はchapter3の内容をやっていきたいと思います。
