VUE3 style usage

style first syntax string

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

style second object usage

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

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

The third type of style is placed in data

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

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

The fourth type of style is placed in the calculated attribute computed

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

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

style fifth array syntax

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

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