覚えておくと便利なv-bindの機能をまとめてみた

はじめに

Vue.jsのv-bindは個人的によく使う機能なので、基本に立ち返ってみました。

色々機能があるv-bindですが、特に意識すべき基本構文や覚えておくと便利な機能をまとめました。

この記事で紹介している事はv-bindの機能について書いているので、Vue.jsのバージョンについては2系と３系、基本的にどちらも共通なもので、特に気にしなくてもいいと思います。

基本

v-bindとは

v-bindを使うと状態の変化によってHTMLの属性を変えることができます。

属性というのは下のようなclass属性、text属性の事を指します。

<input class="content" type="password"/>

v-bindを使うと状態に合わせて動的に属性を変える事ができる為、動的なwebアプリケーションを表現する事ができます。

v-bindでは他にもstyle属性もとい、すべてのHTML属性に対して使用する事ができます。

基本の書き方

<input v-bind:class="値とか評価する式" />

• 属性の前に"v-bind"をつけます。上ではclass属性にv-bindをつけています。
• v-bindを付与する事を「バインドする」と言ったりします。

覚えておきたいこと

1. v-bindは省略できる

<input :class="content" type="password" />

v-bindはコロン『:』に置き換えることができます。（省略記法）

開発の現場ではv-bindではなくコロンで記述されている事もあるので覚えておかないと混乱します。

2. 値には変数を当てて使用する事が多い

v-bindは状態が変わる事が前提なので、:class="color_blue"のように決めうちで書く事はあまりないです。

実際は、下記の様にdata属性と紐づけて使用する場面が多いです。

example.vue

<template>
 <input :class=isColor　/>
</template>

<script>
export default {
 data() {
   return{
    isColor: "blue" // isColorの中身が反映される。
   }
 }
}
</script>

ただ、上記の例だとisColor決め打ちしている場所が変わっているだけなので、methodsのところに変数を変える関数を実行させている事が多いです。

例えば下記のコードだったら、isColorで検索してみてどこでどの様にisColor変わっているのか？と思いながらコードを読む事が多いです。

example.vue

<template>
 <input :class=isColor　/>
　　<button @click="isClick">ボタン</button>
</template>

<script>
export default {
 data() {
   return{
    isColor: "blue" 
   }
 },
 methods: {
   isClick() {
     this.isColor = "red" // isClickメソッドを発火させて、isColorの中身を書き換える。
   },
 }
}
</script>

3. 一部の機能だけバージョンにより振る舞いが違う

かなり限定的であまり気にしなくていいのですが、一応注意点です。

vue.jsのバージョン2系と3系とでは、id属性を指定している際に若干の違いがあります。

下記の様にバージョン2系ではv-bindより通常の属性が優先されてしまいます。

この仕様は順番が変わっても、通常の属性の方が優先されます。

ver2_x.vue

<!-- テンプレート -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 結果 -->
<div id="red"></div>

<!-- テンプレート -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- 結果 -->
<div id="red"></div>

一方でバージョン3では、後に書かれている方が優先されます。

ver3_x.vue

<!-- テンプレート -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 結果 -->
<div id="blue"></div>

<!-- テンプレート -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- 結果 -->
<div id="red"></div>

ちなみにclass属性だと、どちらか優先されるとかはなく両方とも出力されます。

v-bimdはVue.jsバージョン2と3での振る舞いに違いがある。

参考のドキュメントはこちら。

使うと便利な書き方

ここまで書いてきた事を前提に、実際に意識しておくと便利、よく使う書き方について紹介します。

1. dataの値によってclass属性を書き換える

class属性の変更はv-bindを使うのに便利で使い所が多いです。（一番使っているかもしれないです。）

例えば、ログインしている時だけにclass属性をバインドして色を変えたり、display:noneを指定して表示を消したり、マウスオーバーしてアクティブの時だけ表示変えたり...色々できます。状態に合わせて表示部分もリアクティブに変えられるので結構汎用性が高いです。

一応style属性でもできるのですが、HTML上にCSSを書いてしまうことになり、かなり見通しが悪くなるのでclass属性の方が使う事が多いです。

class属性の使い方は以下の構文に沿う必要があります。

example.vue

<div :class="{ クラス名: 値または変数、プロパティなど }">

<!-- 下記の様に書く -->
<div :class="{ isOpenClass: isOpen }">

以下は、isOpenがtrueの時だけ適用するときの書き方です。

example.vue

<template>
　<div>
  <div :class="{ isOpenClass: isOpen }">
　　 <button @click="isClick">ボタン</button>
 </div>
</template>

<script>
export default {
 data() {
   return{
    isOpen: true
   }
 },
 methods: {
   isClick() {
     this.isOpen != this.isOpen // クリックすることにbooleanが切り替わる。
   },
 }
}
</script>
<style scoped>
.isOpenClass {
 // isOpenがtrueの時だけ適用させたいCSSを記述する。
}
</style>

isOpenがtrueの時だけ適用させたい部分（isOpenClass）にCSSを記述するだけなので、直感的に書けるのもメリットですね。

2. disabledをバインドして入力フォームやボタンを制御する

disabled属性をバインドすると、非活性化しボタンを押させないなど制御する事ができます。

isDisabledにはtrueまたはfalse（boolean）を指定します。

参考: :disabled | MDN

<div>
  <input :disabled="isDisabled" />
  <button :disabled="isDisabled">ボタン</button>
</div>

3. type属性にバインドして入力方法を工夫する

type属性をバインドすることで、入力方法を工夫することができます。

例えば、ユーザーの入力画面でパスワードを入力する際に最初はtype="password"としておき、何度か間違えた時にtype="text"に変更することで、黒丸の入力から通常の入力に変えて、ユーザーにとって分かりやすく入力を促すことができます。

<div>
  <input :type="showNotice ? 'password' : 'text'" />
</div>

4. isバインドを使ってコンポーネントを動的に切り替える

今までと少し趣旨が違いますが、v-bindはコンポーネントを切り替えることも可能です。

利用するにはtemplateの部分に<component :is="data名"></compenent>を指定する。

example.vue

<template>
 <div>
   <component v-bind:is="changeComponent"></component>
   <div @click="clickChange">コンポーネント変える</div>
 </div>
</template>

script側では下記の様にして、クリックしたらコンポーネントを変えるという処理にしています。

example.vue

<script>
import HogeComponent from "~/components/molecules/hoge.vue";
import HugaComponent from "~/components/molecules/huga.vue";

export default {
  data() {
    return {
      changeComponent: this.$options.components.HogeComponent
    };
  },
 components: {
   HogeComponent,
   HugaComponent
 },
 methods: {
  clickChange: function() {
    this.changeComponent = this.$options.components.HugaComponent);
  }
 }
}
</script>

最後に

v-bindについては他にも機能が沢山ありますが、特に意識すべき所だと思った所をまとめました。

紹介した4つの機能は個人的に使用頻度が高いため、今後も意識してより良く使いこなしていきたいです。

参考

v-bindの機能を全てまとめている方の記事

基本構文など分かりやすい記事