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

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

概要

v-bind:styleとは

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

指定する方法は
v-bind:style="{CSSのプロパティ名: 値}"
もしくは
v-bind:style=算出プロパティ
と記載します。

サンプルソース

1つのスタイルを設定する

dataの値に応じて文字の色を赤色にします。

<div id="app">
    <div v-bind:style="redStyle">
        HELLO
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isRed : true
        },

        computed: {
            redStyle: function() {
                return {
                    color : this.isRed ? 'red' : ''
                }
            }
        }
    });
</script>

ディベロッパーツールなどで確認すると
v-bind:styleの部分は以下のようになっています。
<div style="color: red;">

複数のスタイルを設定する

スタイルを複数指定する場合は
v-bind:style=[.....]
と記載します。

以下は文字色を設定するスタイルと、フォントサイズを設定するスタイルを指定しています。

<div id="app">
    <div v-bind:style="[redStyle, boldStyle]">
        HELLO
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isRed : true,
            isBold: true
        },

        computed: {
            redStyle: function() {
                return {
                    color : this.isRed ? 'red' : ''
                }
            },

            boldStyle: function() {
                return {
                    fontWeight : this.isBold ? 'bold' : ''
                }
            }
        }
    });
</script>

v-bind:styleの部分は以下のようになっています。
<div style="color: red; font-weight: bold;">

以上です。