【 Vue.js v-if編 】 逃げてたけどやってみたら簡単だった ♯２ FIREへの旅路 ♯428
Vue.jsを学習の第二回です。
前回はこちら
私自身が、学びながら、書きますから、
初学者が疑問に思うことを、フォローできると思います。
共に、学びましょう！！
【 Vue.js 】
VueはJavaScriptのライブラリです。
jQueryなどと同じものです。JavaScriptを簡単に扱いやすくしたものという理解で良いでしょう。
何ができるのかを、具体的に見ていきます。
◆ できること #2 表示させる させない 「v-if」◆
このように、要素を表示させるさせないとう制御ができます。
このコードがこちら
<!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">
<title>Document</title>
</head>
<body>
<div id="app"> <!-- id名を "app" にする -->
<p v-if="error">必須項目です</p> <!-- ① v-ifで属性を追加 -->
</div>
<!-- VueのCDNを貼り付けて、Vueを使えるようにする -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- <script>タグで囲んでVueのコードを書く -->
<script>
var app = new Vue({
el: "#app", //elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
data: { //dataの中にVueで扱うデータを定義する
error: false // ② trueになると表示される
}
});
</script>
</body>
</html>▶︎ コード解説
このコードでは、要素を表示させないコードになっています。
① v-ifで属性を追加
<div id="app"> <!-- id名を "app" にする -->
<p v-if="error">必須項目です</p> <!-- ① v-ifで属性を追加 -->
</div>v-ifという属性は、Vue独自の機能です。
この機能をディレクティブと呼びます。
英語で"指令"の意味です。「指令を出す人」はディレクターですね。
今回は、
v-if = "error"として、Vueのインスタンスで制御できるようにします。
※インスタンスの解説は、前回にあります。
② trueになると表示される
<script>
var app = new Vue({
el: "#app", //elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
data: { //dataの中にVueで扱うデータを定義する
error: false // ② trueになると表示される
}
});
</script>v-ifで"error"というディレクティブを定義しました。
ディレクティブ（指令）の内容を
data の中に書きます。
"error"が、"false" か、 "true" かで、
「必須項目です」というテキストを表示する(true)、表示しない(false)を制御します。
! 注意 !
今回のコードは、あくまでも、初期値を書いてるだけになります。
"error" が、true なのか、falseなのかは、別のプログラムを書く必要がありますね。
問い合わせフォームなどで、入力漏れがあった場合に、
今回のような「必須項目です」というテキストを表示させる際に、応用できます。
【 ディレクティブ 】
ディレクティブというVue独自の機能が出てきました。
v-ifだけでなく、v-else、v-else-if
といった、条件分岐のディレクティブが存在します。
これらは、プログラミングで絶対出てくる、if文のVue版ですね。
このほかにも、様々なディレクティブが存在していて、
これを使うことで、非常に便利な実装ができます。
次回以降は、別のディレクティブを紹介します！！