使用 v-bind 指令去绑定行内样式，即使用 v-bind:style 或者 :style 的方式去动态绑定行内样式。
下面实例中我们将直接在 v-bind:style 属性中定义样式，实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
<style type="text/css">
.normal {font-size: 18px; font-weight:bold;}
.active {color: #26b955;}
.under-line {border-bottom: solid 3px red;}
</style>
</head>
<body>
<div id="app">
<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">内联样式</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
activeColor: 'red',
fontSize: 16
}
});
</script>
</body>
</html>上例中，v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" 语句其实定义了一个对象，该对象中定义了元素的字体颜色和字体大小。而字体颜色和大小的值从 vue 对象的 data 中动态获取。
下面实例将演示在 v-bind:style 中引用在 vue 对象 data 中定义的 styleObject 对象。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
<style type="text/css">
.normal {font-size: 18px; font-weight:bold;}
.active {color: #26b955;}
.under-line {border-bottom: solid 3px red;}
</style>
</head>
<body>
<div id="app">
<p v-bind:style="styleObject">直接绑定到一个样式对象通常更好</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
styleObject: {
color: 'blue',
fontSize: '12px'
}
}
});
</script>
</body>
</html>下面实例演示在 v-bind:style 中使用数组的形式引用多个对象，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
<style type="text/css">
.normal {font-size: 18px; font-weight:bold;}
.active {color: #26b955;}
.under-line {border-bottom: solid 3px red;}
</style>
</head>
<body>
<div id="app">
<p v-bind:style="[styleObject2, styleObject]">数组语法可以将多个样式对象应用到同一个元素上</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
styleObject: {
color: 'blue',
fontSize: '12px'
},
styleObject2: {
fontWeight: 'bold',
border: 'solid 1px red'
}
}
});
</script>
</body>
</html>
