VUE3 style 用法

style第一种语法字符串

<div style="color:red; background:yellow">style第一种语法字符串</div>

style第二种 对象用法

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">style第二种 对象用法</div>

data() {
    
    
        return {
    
    
            activeColor: 'red',
            fontSize: 30
        }
    }

style第三种 放在data中

<div :style="styleObject">style第三种 放在data中</div>

data() {
    
    
        return {
    
    
            styleObject: {
    
    
                color: 'red',
                fontSize: '13px'
            }
        }
    }

style第四种 放在计算属性computed中

<div :style="Objectstyle">第四种 放在计算属性computed中</div>

computed:{
    
    
        Objectstyle(){
    
    
            return{
    
    
                color: 'yellow',
                fontSize: '20px',
                'background-color': 'red'
            }
        }
    }

style第五种 数组语法

<div :style="[styleObject, {fontSize:'30px'}]">style第五种 数组语法</div>

data() {
    
    
        return {
    
    
            styleObject: {
    
    
                color: 'red',
                'background-color': 'yellow'
            }
        }
    },