昨天讲了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- ... 等特定浏览器的特殊属性所需的前缀字加上，这样我们就不用自己一个一个写上全部的前缀字了◥(ฅº￦ºฅ)◤