# Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用`v-bind`处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将`v-bind`用于`class`和`style`时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
## [绑定 HTML Class](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class "绑定 HTML Class")
### [对象语法](https://cn.vuejs.org/v2/guide/class-and-style.html#%E5%AF%B9%E8%B1%A1%E8%AF%AD%E6%B3%95 "对象语法")
我们可以传给`v-bind:class`一个对象，以动态地切换 class：
~~~
<div v-bind:class="{ active: isActive }"></div>
~~~
上面的语法表示`active`这个 class 存在与否将取决于数据属性`isActive`的[truthiness](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)。
你可以在对象中传入更多属性来动态切换多个 class。此外，`v-bind:class`指令也可以与普通的 class 属性共存。当有如下模板:
~~~
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
~~~
和如下 data：
~~~
data: {
isActive: true,
hasError: false
}
~~~
结果渲染为：
~~~
<div class="static active"></div>
~~~
当`isActive`或者`hasError`变化时，class 列表将相应地更新。例如，如果`hasError`的值为`true`，class 列表将变为`"static active text-danger"`。
绑定的数据对象不必内联定义在模板里：
~~~
<div v-bind:class="classObject"></div>
~~~
~~~
data: {
classObject: {
active: true,
'text-danger': false
}
}
~~~
渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的[计算属性](https://cn.vuejs.org/v2/guide/computed.html)。这是一个常用且强大的模式：
~~~
<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'
}
}
}
~~~
### [数组语法](https://cn.vuejs.org/v2/guide/class-and-style.html#%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95 "数组语法")
我们可以把一个数组传给`v-bind:class`，以应用一个 class 列表：
~~~
<div v-bind:class="[activeClass, errorClass]"></div>
~~~
~~~
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
~~~
渲染为：
~~~
<div class="active text-danger"></div>
~~~
如果你也想根据条件切换列表中的 class，可以用三元表达式：
~~~
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
~~~
这样写将始终添加`errorClass`，但是只有在`isActive`是 truthy[\[1\]](https://cn.vuejs.org/v2/guide/class-and-style.html#footnote-1)时才添加`activeClass`。
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
~~~
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
~~~
### [用在组件上](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%94%A8%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A "用在组件上")
> 这个章节假设你已经对[Vue 组件](https://cn.vuejs.org/v2/guide/components.html)有一定的了解。当然你也可以先跳过这里，稍后再回过头来看。
当在一个自定义组件上使用`class`属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。
例如，如果你声明了这个组件：
~~~
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
~~~
然后在使用它的时候添加一些 class：
~~~
<my-component class="baz boo"></my-component>
~~~
HTML 将被渲染为:
~~~
<p class="foo bar baz boo">Hi</p>
~~~
对于带数据绑定 class 也同样适用：
~~~
<my-component v-bind:class="{ active: isActive }"></my-component>
~~~
当`isActive`为 truthy[\[1\]](https://cn.vuejs.org/v2/guide/class-and-style.html#footnote-1)时，HTML 将被渲染成为：
~~~
<p class="foo bar active">Hi</p>
~~~
## [绑定内联样式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F "绑定内联样式")
### [对象语法](https://cn.vuejs.org/v2/guide/class-and-style.html#%E5%AF%B9%E8%B1%A1%E8%AF%AD%E6%B3%95-1 "对象语法")
`v-bind:style`的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
~~~
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
~~~
~~~
data: {
activeColor: 'red',
fontSize: 30
}
~~~
直接绑定到一个样式对象通常更好，这会让模板更清晰：
~~~
<div v-bind:style="styleObject"></div>
~~~
~~~
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
~~~
同样的，对象语法常常结合返回对象的计算属性使用。
### [数组语法](https://cn.vuejs.org/v2/guide/class-and-style.html#%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95-1 "数组语法")
`v-bind:style`的数组语法可以将多个样式对象应用到同一个元素上：
~~~
<div v-bind:style="[baseStyles, overridingStyles]"></div>
~~~
### [自动添加前缀](https://cn.vuejs.org/v2/guide/class-and-style.html#%E8%87%AA%E5%8A%A8%E6%B7%BB%E5%8A%A0%E5%89%8D%E7%BC%80 "自动添加前缀")
当`v-bind:style`使用需要添加[浏览器引擎前缀](https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix)的 CSS 属性时，如`transform`，Vue.js 会自动侦测并添加相应的前缀。
### [多重值](https://cn.vuejs.org/v2/guide/class-and-style.html#%E5%A4%9A%E9%87%8D%E5%80%BC "多重值")
> 2.3.0+
从 2.3.0 起你可以为`style`绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
~~~
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
~~~
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染`display: flex`。
**译者注**
\[1\] truthy 不是`true`，详见[MDN](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)的解释。
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- 移动客户端开发
- uni-app基础
- 快速入门程序
- 单页程序
- 底部Tab导航
- Vue语法基础
- 模版语法
- 计算属性与侦听器
- Class与Style绑定
- 样式与布局
- Box模型
- Flex布局
- 内置指令
- 基本指令
- v-model与表单
- 条件渲染指令
- 列表渲染指令v-for
- 事件与自定义属性
- 生命周期
- 项目实践
- 学生实验
- 贝店商品列表
- 加载更多数据
- 详情页面
- 自定义组件
- 内置组件
- 表单组件
- 技术专题
- 状态管理vuex
- Flyio
- Mockjs
- SCSS
- 条件编译
- 常用功能实现
- 上拉加载更多数据
- 数据加载综合案例
- Teaset UI组件库
- Teaset设计
- Teaset使用基础
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代码模版
- 项目实践
- 标签组件
- 失物招领客户端原型
- 发布页面
- 检索页面
- 详情页面
- 服务端开发技术
- 服务端开发环境配置
- Koajs快速入门
- 快速入门
- 常用Koa中间件介绍
- 文件上传
- RestfulApi
- 一个复杂的RESTful例子
- 使用Mockjs生成模拟数据
- Thinkjs快速入门
- MVC模式
- Thinkjs介绍
- 快速入门
- RESTful服务
- RBAC案例
- 关联模型
- 应用开发框架
- 服务端开发
- PC端管理界面开发
- 移动端开发
- 项目实践
- 失物招领项目
- 移动客户端UI设计
- 服务端设计
- 数据库设计
- Event（事件）
- 客户端设计
- 事件列表页面
- 发布页面
- 事件详情页面
- API设计
- image
- event
- 微信公众号开发
- ui设计规范