見出し画像

【 Vue.js v-if編 】 逃げてたけどやってみたら簡単だった ♯2 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版ですね。

このほかにも、様々なディレクティブが存在していて、
これを使うことで、非常に便利な実装ができます。

次回以降は、別のディレクティブを紹介します!!




この記事が気に入ったらサポートをしてみませんか?