【 Vue.js v-bind編】逃げてたけどやってみたら簡単だった♯３　FIREへの旅路 ♯429

S.A.P.Studio

2022年6月8日 18:14

Vue.jsを学習の第三回です。

前回はこちら

私自身が、学びながら、書きますから、
初学者が疑問に思うことを、フォローできると思います。

共に、学びましょう！！

【 Vue.js 】

VueはJavaScriptのライブラリです。
jQueryなどと同じものです。JavaScriptを簡単に扱いやすくしたものという理解で良いでしょう。

何ができるのかを、具体的に見ていきます。

◆ できること　#３属性の置き換え「v-bind」◆

今回は、「v-bind」というディレクティブです。

このディレクティブで、できることは、属性の置き換えです。

下記のコードでは、"error_class" が "error" に置き換わるコードです。

<!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>


<!-- ① クラスerrorの文字色をredにする -->
<style>
  .error{
    color: red;
  }
</style>

</head>

<body>

  <div id="app">　　<!-- id名を "app" にする -->
    <p v-bind:class="error_class">必須項目です</p>　　<!-- ②　v-bindディレクティブで、class属性をVueで割り当てる -->
  </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_class: "error" // ③  error_classが"error"に置き換わる

      }
    });
  </script>
</body>

</html>

① クラスerrorの文字色をredにする

<style>
  .error{
    color: red;
  }
</style>

errorクラスのStyleを指定します。
これで、「必須項目です」の文字色が赤になります。

②　v-bindディレクティブで、class属性をVueで割り当てる

  <div id="app">　　<!-- id名を "app" にする -->
    <p v-bind:class="error_class">必須項目です</p>　　
  </div>

<p>タグ内に、「v-bind:class="error_class"」と書かれています。

bindとは、「関連付ける」と理解しましょう。

今回の場合、関連付けるのは、class属性の"error_class"という値と、
後で出てくる、"error"というクラス名です。

③ error_classが"error"に置き換わる

 <script>
    var app = new Vue({
      el: "#app",     //elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //dataの中にVueで扱うデータを定義する 
        error_class: "error" // ③  error_classが"error"に置き換わる

      }
    });
  </script>

先ほど、v-bindを使って、関連付けるための準備しました。

ここでは、"error_class"という値に関連付けるものを、定義します。

それは、こちら

data: {        //dataの中にVueで扱うデータを定義する 
        error_class: "error" // ③  error_classが"error"に置き換わる

      }

Vueでは、dataの中に定義していきます。
今回のコードでは、v-bindした、"error_class"に、"error"を関連づけています。

これにより、

  <div id="app">　　<!-- id名を "app" にする -->
    <p v-bind:class="error_class">必須項目です</p>　　
  </div>

このコードは、書き変わります。

  <div id="app">　　<!-- id名を "app" にする -->
    <p class="error">必須項目です</p>　　
  </div>

<p>タグに、classが付与されています。

そして、"error"クラスの指定したスタイルが適用され、文字色が赤になります。

【 v-bind 】

今回のように、属性を置き換えることができるのが、
v-bindというディレクティブです。

第一回で、マスタッシュを使って、要素を置き換える方法を学びました。

この方法でも、実装できそうですが、
今回のように、classという「属性」を置き換えることはできません。

classを置き換えて制御できることは、
ユーザーの動きに合わせて何かを変化させたりという機能の実装に応用できそうですね！！

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

【 Vue.js v-bind編 】 逃げてたけどやってみたら簡単だった♯３ FIREへの旅路 ♯429