【vue3入门】-【14】style绑定

style绑定

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

• 绑定对象（常用）

<template>
    <p :style="{ color: 'red' }">style绑定1</p>
    <p :style="{ color: activeColor, fontSize: fontSize + 'px' }">style绑定2</p>

    <p :style="styleSize">style绑定3</p> <!--绑定对象：常用方式-->
</template>
<script>
export default {
    data() {
        return {
            activeColor: 'red',
            fontSize: '30',
            styleSize: {
                color:'red',
                fontSize:'30px'
            }
        }
    }
}
</script>

• 绑定数组（不常用）

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

<p :style="[styleSize]">style绑定4</p> <!--绑定数组：不常用，也不推荐-->

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9