目录
可以通过类名或者内联样式来设置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
}
},