vue中样式的使用

目录

一、类名

二、内联样式

---

可以通过类名或者内联样式来设置DOM元素或组件的样式

一、类名

1、变量形式

//html结构
<div :class="box"> 哈哈</div>
//组件数据
data(){
    return {
        box:"box2",//box2是CSS样式中已经定义好的样式
    }
}

2、数组形式

//html结构
<div :class="['box','fs40']"> 大红字 </div>//其中的类名的样式都已经在CSS中写好了

3、三目表达式

//html结构
<div :class="flag? 'pink': 'fs40'"> 哈哈哈 </div>
<div :class="age>20? 'pink': 'fs40'"> 哈哈哈哈 </div>
//组件结构
data(){
    return {
        flag:true,
        age:18,//通过数据控制类名
    }
}

4、数组+三目表达式

//html结构
<div :class="['red',age>20? 'pink': 'fs40']"> 哈哈哈 </div>//数组的元素是通过三目表达式控制的
//组件结构
data(){
    return {
        age:18,//通过数据控制类名
    }
}

5、对象

//html结构
<div :class="{pink:flag,fs40:flag}"> 哈哈哈 </div>
//组件结构
data(){
    return {
        flag:true,
    }
}

二、内联样式

1、对象形式

//html结构
<div :style="style1">  今天预报有雨 ！ </div>
//组件结构
data(){
    return {
         style1:{color:'red','font-size':'40px'},
    }
}

2、数组的元素是对象

//html结构
<div :style="[style2,style3]">  今天预报有雨222 ！ </div>
//组件结构
data(){
    return {
         style2:{color:'pink'},
         style3:{'font-size':'40px'},
    }
}

3、绑定方法，拿到返回值

//html结构
<div :style="getStyle()">  今天预报有雨333 ！ </div>
<button @click="changeColor"> 点我换颜色</button>
//组件结构
data(){
    return {
         style1:{color:'red','font-size':'40px'},
    }
   },
methods: {
            changeColor(){
                this.style1.color = 'blue'
            },
            getStyle(){
                return this.style1
            }
       },