Style绑定

数据绑定的一个常见需求场景是操纵元素的 CSS style列表，因为 style 是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组

绑定对象

xxxxxxxxxx
<template>
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Style绑定</div>
</template>
<script>
export default {
    data() {
        return {
            activeColor: 'red',
            fontSize: 30
        }
    }
}
</script>

xxxxxxxxxx
<template>
    <div :style="styleObject">Style绑定</div>
</template>
<script>
export default {
    data() {
        return {
            styleObject: {
                color: 'red',
                fontSize: '30px'
            }
        }
    }
}
</script>

绑定数组

我们还可以给 :style 绑定一个包含多个样式对象的数组

xxxxxxxxxx
<template>
    <div :style="[baseStyles]">Style绑定</div>
</template>
<script>
export default {
    data() {
        return {
            baseStyles:{
                color:"green",
                fontSize:"30px"
            }
        }
    }
}
</script>