【Vue3】Vue组件的样式绑定

一、为Html标签绑定class属性

v-bind，为class属性绑定一个对象，在对象中可以设置样式是否可用

1.绑定class属性,由绑定的变量来决定应用哪个样式

2.可以将样式直接设置成Vue组件中的数据对象

注意：v-bind可以缩写为: 

    
    
    
    
    



    

        

              西安
        
        

            郑州
        
        

            武汉
        
    
    

 二、绑定内联样式

 //这种写法可以在data函数直接定义样式属性值

注意：内联的CSS样式属性名与外部的CSS样式属性名有区别的。
内联的CSS样式属性名：通常采用驼峰命名。例如：fontSize
外部的CSS样式属性名：采用’-'进行连接。例如：font-size

    
    
    
    
    



    

        

            济南