Vue.js クラスとスタイルのバインディング
前回の記事はこちら
Vue.js 監視プロパティ
クラスのデータバインディングの基本
まずはVue.jsを使ってCSSのクラスを動的に設定しましょう。
jsfiddleで実際に記述しながら読むことをおすすめします。
<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>
var app = new Vue({
el:'#app',
data:{
isLarge:true
}
})
.large{
font-size:36px;
}
実行結果
ここではcssで作成したlargeクラスをv-vindディレクティブで
isLargeの真偽値を設定して動的に設定しています。
複数のクラスを動的に切り替える
v-vind:classディレクティブでは複数のクラスを
動的に切り替えることができます。
<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>
var app = new Vue({
el:'#app',
data:{
isLarge:true,
hasError:true
}
})
.large{
font-size:36px;
}
.text-danger{
color:red;
}
実行結果
CSSの.largeをisLargeオプションで,
.textdangerをhasErrorオプションで設定しています。
ハイフンを含むクラス名をテンプレートにキジュするときは
''で囲まないと動作しないので注意しましょう。
プレーンなクラス属性との共存
V-bind:classディレクティブはプレーンなクラス属性と共存できます。記述は以下です。
<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>
var app = new Vue({
el:'#app',
data:{
isLarge:true,
hasError:true
}
})
.large{
font-size:36px;
}
.text-danger{
color:red;
}
.bg-gray{
background-color:gray;
}
.text-blue{
color:blue;
}
実行結果１
bg-grayとtext-blueクラスがプレーンに当たっている状態から
isLargeオプションをtrueに切り替えます。
すると.largeクラスが動的に付与され文字サイズが大きくなります。
実行結果2
続いてhasErrorオプションをtrueにします。
こちらはtext-dangerクラスをバインディングしますが変化はありません。
CSSが競合した場合は読み込みの順番が優先されるため
text-dangerクラスはtext-blueクラスによって上書きされます。
配列構文によるクラスのデータバインディング
v-bind:classではクラスのリストを渡すこともできます。
記述は以下です。
```html:index/html
Hello Vue.js!
```javascript:index.js
var app = new Vue({
el:'#app',
data:{
largeClass:'large',
dangerClass:'text-danger'
}
})
.large{
font-size:36px;
}
.text-danger{
color:red;
}
.bg-gray{
background-color:gray;
}
.text-blue{
color:blue;
}
このようにブランケット[]を使うことで複数のclassを
配列構文でバインディングすることができます。
オブジェクトデータの利用
配列構文で複数のクラスをテンプレートに渡すと
クラスの数だけ追加が必要となりコードの見通しが悪くなります。
そこでデータオプションにオブジェクトを定義して
v-bind:classに渡すことができます。
記述は以下のとおりです。
<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>
var app = new Vue({
el:'#app',
data:{
classObject:{
large:true,
'text-danger':true
}
}
})
.large{
font-size:36px;
}
.text-danger{
color:red;
}
}
実行結果
classObjectというオプションに.largeと.text-dangerクラスを格納し
v-bind:classでバインディングすることができました。
クラスの条件に３項演算子を使う
v-bind:classではクラスの条件に３項演算子を使うことができます。
記述は以下です。
<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>
var app = new Vue({
el:'#app',
data:{
largeClass:{
large:true,
'bg-gray':true
},
dangerClass:{
'text-danger':true
},
isLarge:true
}
})
.large{
font-size:36px;
}
.text-danger{
color:red;
}
.bg-gray{
background-color:gray;
}
.text-blue{
color:blue;
}
実行結果
以下の部分が３項演算子（ifのショートハンド）です。
isLargeがtrueならlargeClassをfalseなら''を取得します。
isLarge ? largeClass : ''
今回のテンプレートではブランケット[]を使い
３項演算子とdangerClassを配列にして渡しています。
そのためdangerClassは常に設定され
largeClassは３項演算子でisLargeオプションの
真偽値によって設定されます。
次回は条件付きレンダリングです。
Vue.js 条件付きレンダリング