目录
一、动态绑定class
1.判断是否绑定一个类名
2.判断是否绑定一个active
3. 判断绑定多个
4. 把需要绑定的类名储存到data中
5.三元判断
6.动态静态结合
# 完整代码
二、动态绑定style写法
1.对象绑定
2.数组绑定
3. 三元运算符
4.绑定data对象
5. 动态静态结合
# 完整代码
一、动态绑定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>
