Vue中通過屬性綁定為元素綁定style

使用內聯樣式

1，直接在元素上通過 :style的形式書寫樣式對象

<!--如果屬性中包含- 必須給屬性加引號-->
<h1 :style="{color: 'red', 'font-weight': 200}">你好明天</h1>

2，將樣式對象，定義到data中，並直接引用到 :style中

• 在data上定義樣式：
• 在元素中 通過屬性綁定的形式 將樣式對象應用到元素中

<div id="div1">
    <!--如果屬性中包含- 必須給屬性加引號-->
    <h1 :style="obj">你好明天</h1>
</div>
<script>
    var vm = new Vue({
        el: "#div1",
        data: {
            flag: true,
            obj: {color: 'red', 'font-weight': 200}
        }
    })
</script>

3，在 :style中通過數組 引用多個 data上的樣式對象

• 在data上定義樣式：
• 在元素中 通過屬性綁定的形式 將樣式對象應用到元素中

<div id="div1">
    <!--如果屬性中包含- 必須給屬性加引號-->
    <h1 :style="[obj1, obj2]">你好明天</h1>
</div>
<script>
    var vm = new Vue({
        el: "#div1",
        data: {
            flag: true,
            obj1: {color: 'red', 'font-weight': 200},
            obj2: {'font-style': 'italic'}
        }
    })
</script>