使用内联样式
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>