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

绑定 HTML Class

对象语法

    <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。（truthiness指if转换后为true的值）
此外，v-bind:class 指令也可以与普通的 class 属性共存。

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

    <div v-bind:class="classObject"></div>
    data: {
      isActive: true,
      error: null
    },
    computed: {
      classObject: function () {
        return {
          active: this.isActive && !this.error,
          "text-danger": this.error && this.error.type === "fatal"
        }
      }
    }

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

    <div v-bind:class="[activeClass, errorClass]"></div>
    data: {
      activeClass: "active",
      errorClass: "text-danger"
    }

在数组语法中也可以使用对象语法：

    <div v-bind:class="[{ active: isActive }, errorClass]"></div>

用在组件上

当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

    Vue.component("my-component", {
      template: '<p class="foo bar">Hi</p>'
    })
    
    //渲染后
    <p class="foo bar baz boo">Hi</p>

对于带数据绑定 class 也同样适用：

<my-component v-bind:class="{ active: isActive }"></my-component>

绑定内联样式

对象语法

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    data: {
      activeColor: "red",
      fontSize: 30
    }

直接绑定到一个样式对象通常更好，这会让模板更清晰
同样的，对象语法常常结合返回对象的计算属性使用。

数组语法

        //数组中的元素实际是一个对象
    <div v-bind:style="[baseStyles, overridingStyles]"></div>

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

多重值

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

    <div :style="{ display: [’-webkit-box‘, ‘-ms-flexbox’, ‘flex’] }"></div>
版权声明：本文为qq3279338858原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：http://www.cnblogs.com/qq3279338858/p/7991404.html