【Vue.js】クラスのデータバインディング
クラスのデータバインディング
クラスのデータバインディングの基本の書き方はこうなる。
例えば文字を大きくする場合
JavaScript
var vm = new Vue({ el: '#vm', data: { isLarge: true } })
HTML
<div id="vm"> <p> Hello <span v-bind:class="{large: isLarge">Vue.js!</span> </p> </div>
CSS
.large { font-size: 36px; }
isLargeがtrueの時はVue.js!は大文字になる。
また、v-bind:classは複数適用が可能でカンマで繋げれば良い。
JavaScript
var vm = new Vue({ el: '#vm', data: { isLarge: true, hasError: true } })
HTML
<div id="vm"> <p> Hello <span v-bind:class="{large: isLarge, 'text-danger': hasError}">Vue.js!</span> </p> </div>
CSS
.large { font-size: 36px; } .text-danger { color: red; }
配列構文での記述
cssの内容をdataの中に記述して、配列構文でv-bindを書くことができる。
JavaScript
var vm = new Vue({ el: '#vm', data: { largeClass: 'large', // cssのクラス名 dangerClass: 'text-danger' } })
HTML
<div id="vm"> Hello <span v-bind:class="[largeClass, dangerClass]">Vue.js!</span> </div>
クラスの数が増えるとわかりづらくなるので、dataオプションにclassObjectのプロパティを作ってまとめて管理する。
JavaScript
var vm = new Vue({ el: '#vm', data: { classObject: { large: true, // クラス名 'text-danger': true } } })
HTML
<div id="vm"> Hello <span v-bind:class="classObject">Vue.js!</span> </div>
随分とみやすくなった。
三項演算子を使ってみる
三項演算子を使ってクラスの条件を分けてみる。
JavaScript
var vm = new Vue({ el: '#vm', data: { largeClass: { large: true, 'bg-gray': true }, dangerClass: { 'text-danger': true }, isLarge: true } })
HTML
<div id="vm"> <p> Hello <span v-bind:class="[isLarge ? largeClass : '', dangerClass]">Vue.js!</span> </p> </div>
CSS
.large { font-size: 36px; } .text-danger { color: red; } .bg-gray { background-color: gray; }
isLargeがtrueの時、largeClassが適用される。
falseの時は三項演算子で''となっているので適用から外れる。
また、dangerClassは常に適用される。