昨天講了class的綁定，今天換來講style (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

綁定Style

v-bind:style綁定的方式跟昨天的class很像。
Style 是 key:value 做為一組，單個 DOM 元素可以設置多個 style，以;區隔各個 style :

<div style="color:orange;font-size:50px">Hello vue</div>

Object Syntax

v-bind:style 的object語法十分直觀——看起來非常像 CSS，但其實是一個 JavaScript object。CSS property 名可以用駝峰式 (camelCase) 或短横線分隔 (kebab-case，記得用引號括起來) 來命名：

<div id="app">
    <div v-bind:style="{color:color,fontSize:size}">
        Hello vue
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            color: 'orange',
            size: '50px'
        },
    });
</script>

我們也可以直接將它綁定到一個style object上，這樣模板看起來會更清晰。

<div v-bind:style="styleObject">Hello vue</div>

data: {
    styleObject: {
        color: 'orange',
        fontSize: '50px'
    }
}

Array Syntax 數組語法

v-bind:style 的array syntax可以將多個樣式object應用到同一個元素上：

<div id="app">
    <div v-bind:style="[fontStyleObj, backgroundStyleObj]">Hello vue</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            fontStyleObj: {
                color: '#3A006F',
                fontSize: '100px',
                fontStyle: 'italic'
            },
            backgroundStyleObj: {
                background: '#DCB5FF'
            }
        },
    });
</script>

三元運算

style也跟class一樣除了array也可以使用三元運算的方式來綁定。

<div id="app">
    <div v-bind:style="{color:color,fontSize:size,background:isBrown ? 'brown' : ' '}">
        Hello vue
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            color: 'orange',
            size: '50px',
            isBrown: true
        },
    });
</script>
<style>
    .brown {
        color: brown;
    }
</style>

自動添加前綴

使用 Vue.js 綁定 Style 時， Vue 會幫忙把 -webkit- 、 -moz- ... 等特定瀏覽器的特殊屬性所需的前綴字加上，這樣我們就不用自己一個一個寫上全部的前綴字了◥(ฅº￦ºฅ)◤