vue可以使用v-bind指令给标签动态绑定class和style
一、动态绑定class:
动态绑定class共3种方式:
1.绑定单个class
<template>
<div :class="class1"></div>
</template>
<script>
export default{
data(){
return {
class1:'bg'
}
}
}
</script>
<style>
.bg{
background-color:red;
}
</style>
2.用数组绑定多个class
2.1 数组里面的项是字符串
<div :class="['class1','class2','class3']"></div>
2.2 数组里面的项是变量名
<template>
<div :class="[class1,class2,class3]"></div>
</template>
<script>
export default{
data(){
return {
class1:'bg',
class2:'cl',
class3:'bd'
}
}
}
</script>
<style>
.bg{
background-color:red;
}
.cl{
color:green;
}
.bd{
border:1px solid black;
}
</style>
2.3 数组里面的项是对象
注意:对象的key就是类的名字,对象的key不是变量名
<div :class="[{bg:boolean}]"></div>
3 用对象绑定单个class
注意:对象的key就是类的名字,对象的key不是变量名
<div :class="{bg:boolean}"></div>
二、动态绑定style:
1.对象写法
css属性名可用下划线写法,需加引号:‘background-color’
css属性名也可用驼峰写法,加不加引号都可:backgroundColor
注意:
1.对象的key就是ccs属性的名字,对象的key不是变量名
2.多个属性建议直接给style绑定一个对象
<div :style="{backgroundColor:'red'}"></div>
2.数组写法
<div :style="[bg,cl]"></div>