vue3 class样式

1.数组
:class="[‘name1’,‘name2’]"
2.三元表达式
:class="[‘name1’,flag?‘name2’:’’]"
3.嵌套
:class="[‘name1’,{‘name2’:flag}]"
:class={name2:flag} 只有一个属性进行调用时，[]和“”去掉后效果相同，可能会出现bug，出项后再进行添加
4.使用对象
:class="{name1:true,name2:false}"

:class=“mybody”
mybody:{name1:true,name2:false}

5.直接使用
class=“name1 name2 name3”

使用[]的代码中的调用属性需要加单引号；使用{}中的属性可直接使用，都需要在class前加：

二话不说直接代码走起

    
    
    
    

    

    


    
    

         
H5大不大，瓦莱达

         
H5大不大，瓦莱达

         
H5大不大，瓦莱达

         
H5大不大，瓦莱达

         
H5大不大，瓦莱达555

         
H5大不大11111，瓦莱达

         
瓦房大幅
    

    

使用内联样式进行设置

1.使用style进行样式设置,进行绑定直接在对象上进行设置
:style="{‘color’:‘blue’,‘font-size’:‘75px’}"
color可以不加单引号，但是最好每个都加防止出现错误，不怕麻烦就怕bug

2.使用data进行设置
:style=“style1”
data:{
style1:{‘color’:‘blue’,‘font-size’:‘175px’}
}
3.从data中获得多个进行设置
:style="[style1,style2]"
data:{
style1:{‘color’:‘blue’,‘font-size’:‘175px’}，
style2:{‘color’:‘blue’,‘font-size’:‘175px’}
}

    
    
    
    
    

    




    

          

        
{{msg}}
        
{{msg}}
        
{{msg}}
        
{{msg}}
        
{{msg}}

        
{{msg}}
        
          

        
好不好
        
好不好
        
好不好