Vue3基础-style绑定

Style 绑定

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

<template>
    <!--正常写-->
    <p :sytle="{color:'red',FontSize:'30px'}"> Style绑定1</p>
    <!--动态绑定-->
    <!--这里的size是没有单位的，所以要在后面增加单位px-->
    <p :sytle="{color:activeColor}"> Style绑定2</p>
    <!--更简便的写法，直接引用了对象-->
    <p :sytle="styleObject"> Style绑定3</p>
    <!--绑定一个含多个样式的数组-->
    <p :sytle="[styleObject,background]"> Style绑定3</p>
    
    <p>Class样式绑定2</p>
    <p>Class样式绑定3</p>
</template>

<script>
export default {
    data(){
        return{
            activeColor:"green"
            size:30
            styleObject:{
                color:"red",
                fontSize:"30px"
            },
            baseStyle:{
                background:black
            }
        }
    }
}
</script>