Vue系列教程（十）属性绑定为元素绑定style行内样式

另一种设置样式的方式是通过内联样式，有以三种方式：

1.直接在元素上通过[:style]的形式，书写样式对象

<div id="app">
    <h1 :style="{color: 'red','font-weight': 200}">这是一个h1标签</h1>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>

注：

• 属性值需要加单引号，如'red'
• 如果属性名中包含横线-，必须加单引号，如'font-weight'

2.将样式对象，定义到data中，并直接引用到:style中

在第一种方式得基础上，也可以将样式抽离出来：

<div id="app">
    <h1 :style="styleObj">这是一个h1标签</h1>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObj:{color: 'red','font-weight': 200}
        },
        methods: {}
    })
</script>

3.在:style中通过数组，引用多个data上的样式对象

使用数组的实现方式如下：

<div id="app">
    <h1 :style="[styleObj1,styleObj2]">这是一个h1标签</h1>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObj1: {color: 'red', 'font-weight': 200},
            styleObj2: {'font-style': 'italic'}
        },
        methods: {}
    })
</script>

推荐阅读：
Vue系列教程（一）基础介绍
Vue系列教程（二）v-cloak、v-text、v-html的基本使用
Vue系列教程（三）v-bind指令
Vue系列教程（四）v-on指令定义事件
Vue系列教程（五）跑马灯效果案例
Vue系列教程（六）事件修饰符
Vue系列教程（七）v-model和双向数据绑定
Vue系列教程（八）v-model实现计算器案例
Vue系列教程（九）属性绑定为元素设置class类样式