目录
一、动态绑定class
项目中会需要根据不同的情况判断是否添加类名
1.判断是否绑定一个类名
<div :class="{ 'active': isActive }">1</div>
2.判断是否绑定一个active
<div :class="{'active' : isActive == 1}">2</div>
<div :class="{'active' : isActive == num}">2</div>
3. 判断绑定多个
<div :class="{ 'active': isActive,'active1':isActive }">3</div>
4. 把需要绑定的类名储存到data中
<div :class="classObject">3</div>
<div :class="[isActive,isUser]">3</div>
5.三元判断
注意:三元运算符后面的“:”两边的class需要加上单引号,否则不能正确渲染
<div :class="[ isActive ? 'active' : '']">4</div>
<div :class="[ isActive==1 ? 'active' : '']">4</div>
6.动态静态结合
<div :class="[{ 'active': isActive }, 'user']">5</div>
# 完整代码
<template>
<div class="a">
<!-- 1.判断是否绑定一个类名 -->
<div :class="{ 'active': isActive }">1</div>
<!-- 2.判断是否绑定一个active -->
<div :class="{'active' : isActive == -2}">2</div>
<div :class="{'active' : isActive == item}">2</div>
<!-- 3. 判断绑定多个 -->
<div :class="{ 'active': isActive,'user':isActive }">3</div>
<!--4. 把需要绑定的类名储存到data中 -->
<div :class="classObject">3</div>
<div :class="[isActive,isUser]">3</div>
<!-- 4.三元判断 -->
<!-- 注意:三元运算符后面的“:”两边的class需要加上单引号,否则不能正确渲染 -->
<div :class="[ isActive ? 'active' : '']">4</div>
<div :class="[ isActive==1 ? 'active' : '']">4</div>
<!-- 5.动态静态结合 -->
<div :class="[{ 'active': isActive }, 'user']">5</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
classObject:{ active: true, user:false },
isActive:'active',
isUser:'user'
};
},
};
</script>
<style scoped>
.a > div {
float: left;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.active {
float: left;
margin: 10px;
width: 200px;
height: 200px;
background-color: red;
}
.user {
float: left;
margin: 10px;
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
二、动态绑定style写法
注意:
- 凡是有-的style属性名都要变成驼峰式,比如background-color要变成backgroundColor
- 除了绑定值,其他的属性名的值要用引号括起来
- 比如
backgroundColor: "#000f"
而不是 backgroundColor:#000
1.对象绑定
<div :style="{ color: isActive, fontSize: num + 'px' }">1</div>
2.数组绑定
<div :style="[Styles1, Styles2]">2</div>
<div :style="[{ Styles1:index==1 },{ Styles2: index==1 }]">2</div>
3. 三元运算符
<div :style="{ color: index == 1 ? conFontColor : '#000' }">3</div>
<div :style=" isActive === styleObject.color ? 'color:red': 'color:aqua'" >3</div>
<div :style="[{ float: index == 1 ? 'left' : 'right' },{float: index == 1 ? 'height:64px' : 'height:32px' }]">3</div>
4.绑定data对象
<div :style="styleObject">4</div>
5. 动态静态结合
<div :style="[{ color: index == 1 ? conFontColor : '#000' },{ fontSize: '18px' }]">5</div>
# 完整代码
<template>
<div>
<!-- 1.对象绑定 -->
<div :style="{ color: isActive, fontSize: num + 'px' }">1</div>
<div :style="{ color: index == 1 ? conFontColor : '#000' }">1</div>
<!-- 2.数组绑定 -->
<div :style="[Styles1, Styles2]">2</div>
<div :style="[{ Styles1:index==1 },{ Styles2: index==1 }]">2</div>
<!-- 3. 三元运算符 -->
<div :style="{ color: index == 1 ? conFontColor : '#000' }">3</div>
<div :style=" isActive === styleObject.color ? 'color:red': 'color:aqua'" >3</div>
<div :style="[{ float: index == 1 ? 'left' : 'right' },{float: index == 1 ? 'height:64px' : 'height:32px' }]">3</div>
<!-- 4.绑定data对象 -->
<div :style="styleObject"></div>
<!-- 5. 动态静态结合 -->
<div :style="[{ color: index == 1 ? conFontColor : '#000' },{ fontSize: '18px' }]">5</div>
</div>
</template>
<script>
export default {
data() {
return {
index:1,
isActive :'red',
num:18,
conFontColor:'#fff',
styleObject: {
color: "red",
fontSize: "14px",
},
Styles1:'color: "red"',
Styles2:'fontSize: "14px"'
};
},
};
</script>
<style scoped>
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>