Vue.js クラスとスタイルのバインディング
前回の記事はこちら
Vue.js 監視プロパティ
クラスのデータバインディングの基本
まずはVue.jsを使ってCSSのクラスを動的に設定しましょう。
<divid="app"><p>Hello <spanv-bind:class=" {large:isLarge} ">Vue.js!</span></p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>varapp=newVue({el:'#app',data:{isLarge:true}}).large{font-size:36px;}実行結果
ここではcssで作成したlargeクラスをv-vindディレクティブで
isLargeの真偽値を設定して動的に設定しています。
複数のクラスを動的に切り替える
v-vind:classディレクティブでは複数のクラスを
動的に切り替えることができます。
<divid="app"><p>Hello <spanv-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>varapp=newVue({el:'#app',data:{isLarge:true,hasError:true}}).large{font-size:36px;}.text-danger{color:red;}実行結果
CSSの.largeをisLargeオプションで,
.textdangerをhasErrorオプションで設定しています。
ハイフンを含むクラス名をテンプレートにキジュするときは
''で囲まないと動作しないので注意しましょう。
プレーンなクラス属性との共存
V-bind:classディレクティブはプレーンなクラス属性と共存できます。記述は以下です。
<divid="app"><p>Hello <spanclass="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>varapp=newVue({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に渡すことができます。
記述は以下のとおりです。
<divid="app">
Hello <spanv-bind:class="classObject">Vue.js!</span></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>varapp=newVue({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ではクラスの条件に３項演算子を使うことができます。
記述は以下です。
<divid="app"><p>
Hello <spanv-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>varapp=newVue({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オプションの
真偽値によって設定されます。
次回は条件付きレンダリングです。
