Vue.js 基礎編①(基礎・v-if・v-show)
■Vue.jsの基本的な文法(基礎・v-if・v-show)について解説する
・Vue.jsを使用する為のスクリプト(開発環境)
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
・Vue.jsを使用する為のスクリプト(本番環境)
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
・Vue.jsに記述したデータを「name」変数で出力
【HTMLファイル】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
</head>
<body>
<div id="result">
<!-- Vue.jsに記述した「data」の「name」で設定した値を出力(二重波かっこで括る) -->
{{ name }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js">
</script>
</body>
</html>
【JavaScriptファイル】
(function() {
'use strict';
//ここからVue.jsの記述
//Vueのインスタンスを作成
let vm = new Vue({
//「el」でVueを記述する箇所のエレメントを設定
//今回は「result」という名称のid要素を設定
el: '#result',
//「data」にHTMLファイルに出力するデータを設定
data: {
name: 'tanaka'
}
});
})();
ブラウザで確認すると「tanaka」と表示される
・「v-model」ディレクティブでVue.jsと紐づけ
【HTMLファイル】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
</head>
<body>
<div id="result">
<!-- 「v-model」でVue.jsの「data」で設定した「name」と紐づける -->
<p><input type="text" v-model="name"></p>
<!-- テキストボックスに入力した値をリアルタイムに表示 -->
<p>{{ name }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js">
</script>
</body>
</html>
【JavaScriptファイル】
(function() {
'use strict';
//ここからVue.jsの記述
//Vueのインスタンスを作成
let vm = new Vue({
//「el」にVueを記述する箇所のエレメントを設定
//今回は「result」という名称のid要素を設定
el: '#result',
//「data」内の「name」にHTMLファイルに出力するデータを設定
data: {
name: ''
}
});
})();
【ブラウザの表示結果】
・条件分岐ディレクティブ(v-if・v-else-if・v-else)
【HTMLファイル】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
</head>
<body>
<div id="result">
<!-- テキストボックスに入力した値を「myage」で紐づけ -->
<input type="text" v-model="myage">
<!-- 入力値が空の場合 -->
<p v-if="myage == ''">No Input</p>
<!-- 入力値が20以上の場合、「20歳以上です」と出力 ※今回はシンプルにする為に入力値は数字のみを想定 -->
<p v-else-if="myage >= age20">{{ over20 }}</p>
<!-- それ以外の場合、「20歳未満です」と出力 -->
<p v-else>{{ under20 }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js">
</script>
</body>
</html>
【JavaScriptファイル】
(function() {
'use strict';
let vm = new Vue({
el: '#result',
data: {
myage: '',
age20: 20,
over20: '20歳以上です',
under20: '20歳未満です'
}
});
})();
入力値が空の場合
入力値が20以上の場合
それ以外の場合
・「v-show」ディレクティブで結果がtrueの場合に表示
【HTMLファイル】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
</head>
<body>
<div id="result">
<!-- テキストボックスに入力した値を「myage」で紐づけ -->
<input type="text" v-model="myage">
<!-- 何か入力された場合 -->
<p v-show="myage">入力されています</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js">
</script>
</body>
</html>
【JavaScriptファイル】
(function() {
'use strict';
let vm = new Vue({
el: '#result',
data: {
myage: '',
}
});
})();
入力値が空の場合
何か入力された場合
次はループ処理やイベント処理について解説する→Vue.js 基礎編②(v-for・v-on・methods)