绑定Class

在Vue.js中，可以使用v-bind:class指令来绑定一个或多个类名到HTML元素上。以下是一些示例，说明如何使用这个指令。

对象语法

当v-bind:class指令传递一个对象时，它可以帮助我们动态切换类名。对象的键是类名，而值则是决定是否应用这个类的布尔值。

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

上面的代码会应用active类，只有当isActive数据属性为true时。

我们也可以在对象中提供多个类名，以动态切换多个类：

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

这个例子中，如果isActive为true，则应用active类；如果hasError为true，则应用text-danger类。

而且，v-bind:class指令可以与普通的class属性共存：

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

在这个例子中，如果数据属性满足条件，相应的类名将被添加到元素的类列表中，而不会影响或覆盖已存在的类名。

此外，我们还可以将对象语法和计算属性结合使用：

<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'
        }
    }
}

在这个例子中，计算属性classObject返回一个对象，根据该对象的属性值动态应用类名。这是一个非常强大的模式，因为它允许我们根据复杂的逻辑动态控制类的应用。

数组语法

我们也可以将一个数组传递给v-bind:class，以应用一个类名列表：

<div v-bind:class="[activeClass, errorClass]"></div>

在这种情况下，如果数组中的任何元素是真（如非空字符串、非零数字等），则该类名将被添加到元素的类列表中。如果数组是空的，则不会添加任何类名。我们可以使用三元表达式在数组语法中实现条件切换：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这个例子中，如果isActive为true，则应用activeClass；否则不应用任何类名。然后应用errorClass。当有多个条件类时，我们可以使用对象语法：

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

这样写更简洁。当数组中的元素是对象时，对象的键是类名，而值则是决定是否应用这个类的布尔值。如果键对应的值为真，则应用相应的类名。

用在组件上

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

声明一个组件：

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

使用该组件并提供一个类：

<my-component class="baz boo"></my-component>

渲染的HTML将是：

<p class="foo bar baz boo">Hi</p>

在这个例子中，组件原本的类名是foo bar，但我们又添加了baz boo。最终的结果是这四个类名都被添加到该元素的类列表中。

绑定内联样式

在Vue.js中，可以使用v-bind:style指令将数据绑定到元素的样式属性。下面是v-bind:style的一些用法：

对象语法

v-bind:style的对象语法非常直观，它使用JavaScript对象来定义样式。CSS property的名字可以用驼峰式（camelCase）或短横线分隔（kebab-case，记得用引号括起来）来表示。

例如：

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

对应的JavaScript代码如下：

// JS
data: {
  activeColor: 'red',
  fontSize: 30
}

通常，直接绑定一个样式对象更好，这样可以使模板更加清晰：

<!-- HTML -->
<div v-bind:style="styleObject"></div>

对应的JavaScript代码如下：

// JS
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组语法

v-bind:style的数组语法可以将多个样式对象应用到同一个元素上：

<!-- HTML -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

在这里，baseStyles和overridingStyles都是样式对象。

自动添加前缀

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

多重值

可以为style绑定中的property提供一个包含多个值的数组，通常用于提供多个带前缀的值。例如：

<!-- HTML -->
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

在这种情况下，数组中的最后一个值将是最终应用到元素上的值，因为前面的值通常会被浏览器忽略。