0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.js クラスとスタイルのバインディング

Last updated at Posted at 2020-05-07

#Vue.js クラスとスタイルのバインディング

前回の記事はこちら
Vue.js 監視プロパティ

##クラスのデータバインディングの基本
まずはVue.jsを使ってCSSのクラスを動的に設定しましょう。
jsfiddleで実際に記述しながら読むことをおすすめします。

index/html
<div id="app">
  
  <p>Hello <span v-bind:class=" {large:isLarge} " >Vue.js!</span></p>

</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
  el:'#app',
  data:{
    isLarge:true
  }
})
index.css
.large{
  font-size:36px;
}

実行結果
Image from Gyazo

ここではcssで作成したlargeクラスをv-vindディレクティブで
isLargeの真偽値を設定して動的に設定しています。

##複数のクラスを動的に切り替える
v-vind:classディレクティブでは複数のクラスを
動的に切り替えることができます。

index/html
<div id="app">
  
  <p>Hello <span v-bind:class=" {large: isLarge, 'text-danger': hasError} " >Vue.js!</span></p>

</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
	el:'#app',
  data:{
    isLarge:true,
    hasError:true
  }
 
})
index.css
.large{
  font-size:36px;
}

.text-danger{
  color:red;
}

実行結果
Image from Gyazo

CSSの.largeをisLargeオプションで,
.textdangerをhasErrorオプションで設定しています。

ハイフンを含むクラス名をテンプレートにキジュするときは
''で囲まないと動作しないので注意しましょう。

##プレーンなクラス属性との共存

V-bind:classディレクティブはプレーンなクラス属性と共存できます。記述は以下です。

index/html
<div id="app">
  
  <p>Hello <span class="bg-gray text-blue" v-bind:class=" {large: isLarge, 'text-danger': hasError} " >Vue.js!</span></p>

</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
	el:'#app',
  data:{
    isLarge:true,
    hasError:true
  }
 
})
index.css
.large{
  font-size:36px;
}

.text-danger{
  color:red;
}

.bg-gray{
  background-color:gray;
}

.text-blue{
  color:blue;
}

実行結果1
Image from Gyazo

bg-grayとtext-blueクラスがプレーンに当たっている状態から
isLargeオプションをtrueに切り替えます。
すると.largeクラスが動的に付与され文字サイズが大きくなります。

実行結果2
Image from Gyazo
続いてhasErrorオプションをtrueにします。
こちらはtext-dangerクラスをバインディングしますが変化はありません。

CSSが競合した場合は読み込みの順番が優先されるため
text-dangerクラスはtext-blueクラスによって上書きされます。

##配列構文によるクラスのデータバインディング
v-bind:classではクラスのリストを渡すこともできます。
記述は以下です。

index/html
<div id="app">
Hello <span v-bind:class="[largeClass , dangerClass]">Vue.js!</span> 
 
</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
	el:'#app',
  data:{
    largeClass:'large',
    dangerClass:'text-danger'
  }
 
})
index.css
.large{
  font-size:36px;
}

.text-danger{
  color:red;
}

.bg-gray{
  background-color:gray;
}

.text-blue{
  color:blue;
}

このようにブランケット[]を使うことで複数のclassを
配列構文でバインディングすることができます。

##オブジェクトデータの利用
配列構文で複数のクラスをテンプレートに渡すと
クラスの数だけ追加が必要となりコードの見通しが悪くなります。

そこでデータオプションにオブジェクトを定義して
v-bind:classに渡すことができます。
記述は以下のとおりです。

index/html
<div id="app">
Hello <span v-bind:class="classObject">Vue.js!</span> 
 
</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
	el:'#app',
  data:{
    classObject:{
      large:true,
      'text-danger':true
    }
  }
})
index.css
.large{
  font-size:36px;
}

.text-danger{
  color:red;
}

}

実行結果
Image from Gyazo

classObjectというオプションに.largeと.text-dangerクラスを格納し
v-bind:classでバインディングすることができました。

##クラスの条件に3項演算子を使う
v-bind:classではクラスの条件に3項演算子を使うことができます。
記述は以下です。

index/html
<div id="app">
<p>
  Hello <span v-bind:class="[isLarge ? largeClass : '' , dangerClass ]">Vue.js!</span> 
</p>
</div>

<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
  el:'#app',
  data:{
    largeClass:{
      large:true,
      'bg-gray':true
    },
    dangerClass:{
      'text-danger':true
    },
    isLarge:true
  }
})
index.css
.large{
  font-size:36px;
}

.text-danger{
  color:red;
}

.bg-gray{
  background-color:gray;
}

.text-blue{
  color:blue;
}

実行結果
Image from Gyazo

以下の部分が3項演算子(ifのショートハンド)です。
isLargeがtrueならlargeClassをfalseなら''を取得します。

isLarge ? largeClass : '' 

今回のテンプレートではブランケット[]を使い
3項演算子とdangerClassを配列にして渡しています。

そのためdangerClassは常に設定され
largeClassは3項演算子でisLargeオプションの
真偽値によって設定されます。

次回は条件付きレンダリングです。
Vue.js 条件付きレンダリング

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?