class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>VUE绑定属性</title>
    <script src="js/vue.min.js"></script>
    <style>
      .bg{
        width:400px;height: 400px;
        background: #FF0000;
      }
      .text-danger{
        border: 1px solid #00f;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-bind:class="{bg:isBg,'text-danger':hasError}"></div>
    </div>
    <script>
      new Vue({
        el:'#app',
        data:{
          isBg:true,
          hasError:true
        }
      })
    </script>
  </body>
</html>

VUE属性绑定_数组 


 也可以以另外的格式：VUE属性绑定_html_02

VUE属性绑定_html_03 

 我们知道在CSS中有行内样式，现在可以通过VUE内联样式来实现：

VUE属性绑定_内联样式_04

效果 如下：

VUE属性绑定_vue.js_05

前端代码：

VUE属性绑定_数组_06 

也可以把{color:activeColor,fontSize:fontSize+'px'}变成一个样式对象styleObject，在VUE代码中对其进行设置：

VUE属性绑定_VUE_07

继续升级，使用数组，将多个样式绑定到一个对象上：

VUE属性绑定_html_08

VUE属性绑定_数组_09