0%

Programmingプログラミングナレッジ

Posted:2019.05.07

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

前回記事「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を切り替えたい時にはこのようなアプローチで対応するようになります。前回でもまとめていましたが、動的に要素を切り替えるのと合わせて、属性値を切り替えるのもよく使われるので覚えておきたいですね。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】