【Vue】入門編(v-bind:class)

こんにちは。
本日はVue.jsの入門編です。

概要

v-bind:classとは

v-bindディレクティブの1つで、
ディレクティブの引数の属性名にclassを指定します。

オブジェクトや配列を属性値に指定することで、
クラスを動的に切り替える事ができます。

記載は以下のように行います。 <v-bind:class="{クラス名：プロパティ}">

サンプルソース

2つのパターンのサンプルです。
1つ目はdataに設定した値をそのまま使用。
もう1つは算出プロパティを使用しています。

<style>
    .errorClass {color:red;}
    .warningClass {color:yellow;}
</style>
<div id="app">
    <div v-bind:class="{errorClass:isError}">
        エラーの場合文字が赤色になります。
    </div>
    <div v-bind:class="{warningClass:isWarning}">
        this.numの値が10以上の場合文字が黄色になります。
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isError:true,
            num:11
        },

        computed: {
            isWarning: function() {
                return this.num >= 10;
            }
        }
    });
</script>

以上です。