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

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

クラスやスタイルをデータバインディングすることで動的な見た目を作ることが出来ます。

クラスデータバインディングのきほん

.large {
  font-size: 30px;
}

.text-danger {
  color: red;
}

new Vue({
  el: "#app",
  data: {
    isLarge: true,
    hasError: true
  }
})

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

---> v-bindで紐づけられたdataオブジェクトの値がtrueだった時にCSSが割り当てられる。 Vue - JSFiddle - Code Playground

配列でCSS割り当て

こんな感じで配列でCSS割り当ても可能

new Vue({
  el: "#app",
  data: {
    largeClass: 'large',
    dangerClass: 'text-danger'
  }
})

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

Vue - JSFiddle - Code Playground

三項演算子でもOK

condition? expr1 : expr2

こんな感じ！

new Vue({
  el: "#app",
  data: {
    largeClass: {
        large: true,
      'bg-gray': true
    },
    dangerClass: {
        "text-danger": true
    },
    isLarge: true
  }
})

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

--> 三項演算子でCSSの割り当てが出来ている

Vue - JSFiddle - Code Playground