组件的样式一般就是绑定到class或者绑定到style。这两种方式又分别可以使用对象语法或者数组语法。
- class绑定：对象语法或者数组语法
- style绑定： 对象语法或者数组语法
接下来看两个例子就很容易了。
示例
<template>
<div>
<!-- class 对象语法 -->
<div :class="{ 'red': isRed }">
我在测试<span :class="{ 'strong': isStrong }">对象</span>语法
</div>
<!-- class 数组语法 -->
<div :class="[red, strong]">我在测试数组语法</div>
<!-- style 对象语法 -->
<div :style="{ 'color': color }">我在测试style对象语法</div>
<!-- style 数组语法 -->
<div :style="[baseStyle, otherStyle]">我在测试style对象语法</div>
</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
data() {
return {
isRed: true,
isStrong: true,
red: 'red',
strong: 'strong',
color: 'blue',
baseStyle: {
color: 'yellow',
fontSize: '14px'
},
otherStyle: {
backgroundColor: 'black'
}
}
}
})
</script>
<style scoped>
div { margin: 15px; }
.red { color:red; }
.strong { font-weight: bolder; }
</style>
示例.jpg
自动添加前缀
在 :style 中使用需要 (浏览器引擎前缀) vendor prefixes 的 CSS property 时，如 transform，Vue 将自动侦测并添加相应的前缀。
多重值
可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
