Vue.js hello worldを表示する/if文とfor文のサンプル

Vue.jsでhello worldの表示と、if文とfor文のサンプルです。

確認環境
・Windows10
・Google Chrome
・Vue.js 2.5.17

hello worldを表示するサンプル
if文のサンプル
for文のサンプル

hello worldを表示するサンプル

Vue.jsでhello worldを表示するサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="div1">
	<p>{{data1}}</p>
	<p>{{data2}}</p>
	<p>{{data3}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
const test1 = new Vue({
	el: "#div1",
	data: {
		data1: "Hello World1",
		data2: "Hello World2",
		data3: "Hello World3"
	}
});
</script>
</body>
</html>

13行目は、CDNにあるvue.jsを指定しています。
15行目は、vueのインスタンスを生成しています。
16行目のdiv1は、8行目のdiv1に対応しています。
18-20行目のdata1-3は、9-11行目のdata1-3に対応しています。

以下は、実行時のイメージです。

以下は、公式のvue.jsのガイドのリンクです。
https://jp.vuejs.org/v2/guide/

if文のサンプル

Vue.jsのif文のサンプルです。v-ifを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="div1">
<p v-if="data1 == 'A'">Aです</p>
<p v-else-if="data1 == 'B'">Bです</p>
<p v-else>それ以外です</p>
<p v-if="data2.data3 == 'あ'">あです</p>
<p v-else>それ以外です2</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
const test1 = new Vue({
	el: "#div1",
	data: {
		data1: "C",
		data2:{
			data3:"あ"
		}
	}
});
</script>
</body>
</html>

9-11と12-13行目は、if文です。trueになった行のみ表示されます。
20行目の値を変更すると9-11行目の表示される行が変わります。
21,22行目のようにネストしている場合は、12行目のdata2.data3というように表します。

以下は、実行時のイメージです。

以下は、公式のvue.jsの条件付きレンダリング(if文)のリンクです。
https://jp.vuejs.org/v2/guide/conditional.html

for文のサンプル

Vue.jsのfor文のサンプルです。v-forを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="div1">
<ul>
	<li v-for="c1 in color1">{{c1}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
const test1 = new Vue({
	el: "#div1",
	data: {
		color1:[
			'赤',
			'黄',
			'青'
		]
	}
});
</script>
</body>
</html>

10行目は、for文です。
18-22行目は、for文の元になる値です。

以下は、実行時のイメージです。

以下は、公式のvue.jsのリストレンダリング(for文)のリンクです。
https://jp.vuejs.org/v2/guide/list.html