Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Vue.js 2019.05.07

Vue.jsでclassなどの要素の属性値をv-bindを使って動的に設定する

Tags: ,,,

前回記事「Vue.jsで動的にクリックで切り変わるトグル機能をv-ifを使って実装する」でイベントに対してのトグル機能を実装する例を紹介しました。そこでは条件によって動的に表示させる要素を分岐させましたが、今回は条件でclassなどの属性値を動的に設定する方法をまとめていきたいと思います。先述のトグル機能と合わせて使われるケースが多いのではないでしょうか。基本的には同じ要領で条件分岐をさせるイメージですが、属性値を変更する場合には「v-bind」というディレクティブを使います。

 

ある条件で特定のclass名を付与する

まずはある条件でclass名を動的に追加、もしくは削除させるというトグル状にclassを設定する方法です。イベントはクリックで発火させる形で、要素に関数を設定します。そしてclass名を付与する要素に対しては、「v-bind」ディレクティブでclassを設定します。その値ですが波括弧で囲み、キーとなる部分には付与するclass名を、値には対象のデータを設定します。このデータがtrueの時に指定したclassが付与される形になります。そしてfalseになるとclassが削除されます。

【Vue】

<template>
 <div id="app">
  <button v-on:click="toggle_class()">class付与と削除</button>
  <div
   v-bind:class="{ 'elem--active' : isActive }"
  >
   ボタンクリックでこの要素に「.elem--active」のクラスが付与&削除される
  </div>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    isActive: false
   }
  },
  methods: {
   toggle_class: function() {
    this.isActive = !this.isActive
   }
  }
 }
</script>

 

 

ある条件で異なる複数のclass名を切り替える

先ほどは特定のclassを付与・削除の切り替えでしたが、今回は条件によって異なるclass名を付与して切り替えるようなケースです。イベントと関数の設定は同じですが、class切り替えの条件指定の方法が異なります。ここでは「三項演算子」という方法で条件を記述します。三項演算子はif文をそのまま式にしたようなイメージで、下記のように記述していきます。

[ 条件式 ? 'trueの時に返す値' : 'falseの時に返す値' ]

 

これをv-bindで設定したclassの値に適用させていきます。先ほどは波括弧でしたが、三項演算子の場合は角括弧になるので注意します。

【Vue】

<template>
 <div id="app">
  <button v-on:click="change_class()">classの切り替え</button>
  <div
   v-bind:class="[
    isActive === true ? 'elem--active' : 'elem-inactive'
   ]"
  >
   ボタンクリックでこの要素に「.elem--active」と「.elem--inactive」のクラスが切り替わる
  </div>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    isActive: false
   }
  },
  methods: {
   change_class: function() {
    this.isActive = !this.isActive
   }
  }
 }
</script>

 

また、v-onディレクティブでもあったように、v-bindディレクティブでも下記のように省略記法が存在します。こうすることでコードもスッキリしますね。

<div :class="{ 'elem--active' : isActive }"></div>

 

ちなみにですが、class以外にもidやstyleなどの属性を動的に操作する場合にもv-bindディレクティブを使います。

<div 
 v-bind:id="....."
 v-bind:style="....."
</div>

// 省略記法の場合
<div 
 :id="....."
 :style="....."
</div>

 


 

いかがでしょうか、状態によってデザインを変える場合になどclassを切り替えたい時にはこのようなアプローチで対応するようになります。前回でもまとめていましたが、動的に要素を切り替えるのと合わせて、属性値を切り替えるのもよく使われるので覚えておきたいですね。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?