1、绑定class
（1）对象语法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<div class="static" :class="{'active':isActive,error:isError}">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isActive: true,
isError: true
}
});
</script>
</body>
</html>
对象可以传入多个属性，：class可以与普通的class共存。
（2）数组语法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<div class="static" :class="[activeCls,errorCls]">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
activeCls: 'active',
errorCls: 'error'
}
});
</script>
</body>
</html>
2、绑定内联样式
v-bind:style 给元素绑定内联样式，也有对象和数组语法写法。由于直接写一长串样式不便于阅读和维护，所以一般写在data或者computed里。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<div :style="styles">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
styles: {
color: 'red',
fontSize: '14px'
}
}
});
</script>
</body>
</html>
使用;style时vuejs会自动添加前缀。