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>