Vue 2参考手册
指南 | Guide
6. Class and Style Bindings(类和样式绑定)
数据绑定的常见需求是操作元素的类列表及其内联样式。既然它们都是属性,我们可以用它v-bind
来处理它们:我们只需要用我们的表达式计算最终的字符串。但是,干涉字符串连接是烦人的并且容易出错。出于这个原因,Vue v-bind
与class
and一起使用时会提供特殊的增强功能style
。除了字符串之外,表达式还可以评估为对象或数组。
绑定HTML类
对象语法
我们可以传递一个对象v-bind:class
来动态切换类:
<div v-bind:class="{ active: isActive }"></div>
上面的语法意味着active
类的存在将由数据属性的真实性决定isActive
。
您可以通过在对象中包含更多字段来切换多个类。另外,该v-bind:class
指令还可以与普通class
属性共存。所以给了以下模板:
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
以下数据:
data: {
isActive: true,
hasError: false
}
它会渲染:
<div class="static active"></div>
何时isActive
或hasError
更改,班级列表将相应更新。例如,如果hasError
变成true
,班级列表将变成"static active text-danger"
。
绑定对象不必内联:
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
这将会产生相同的结果。我们还可以绑定到返回对象的计算属性。这是一个常见而强大的模式:
<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
来应用一个类的列表:
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
这将渲染:
<div class="active text-danger"></div>
如果您还希望有条件地切换列表中的类,则可以使用三元表达式进行操作:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
这将始终适用errorClass
,但只适用activeClass
于isActive
的真实情况。
但是,如果您有多个条件类,则这可能有点冗长。这就是为什么可以在数组语法中使用对象语法的原因:
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
与组件
本节假定Vue组件的知识。可跳过。
在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>
类绑定也是如此:
<my-component v-bind:class="{ active: isActive }"></my-component>
什么时候isActive
是真的,呈现的HTML将是:
<p class="foo bar active">Hi</p>
绑定内联样式
对象语法
对象语法v-bind:style
非常简单 - 它看起来几乎像CSS,除了它是一个JavaScript对象。对于CSS属性名称,您可以使用camelCase或kebab-case(对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'
}
}
同样,对象语法经常与返回对象的计算属性结合使用。
数组语法
数组语法v-bind:style
允许您将多个样式对象应用于相同的元素:
<div v-bind:style="[baseStyles, overridingStyles]"></div>
自动前缀
当您使用需要一个CSS属性供应商前缀的v-bind:style
,例如transform
,Vue公司会自动检测并添加相应的前缀所应用的样式。
多个值
2.3.0+
从2.3.0+开始,您可以为样式属性提供多个(前缀)值的数组,例如:
<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这只会呈现浏览器支持的数组中的最后一个值。在此示例中,它将呈现display: flex
支持flexbox前缀版本的浏览器。
指南 | Guide相关
Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
主页 | https://vuejs.org/ |
源码 | https://github.com/vuejs/vue |
版本 | 2 |
发布版本 | 2.5.2 |