一、普通的绑定样式直接在style中写好样式，然后直接在需要的地方使用class="定义的样式名称"就可以了
<template>
<div class="green">
你好 vue
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.green{
width: 100px;
height: 50px;
background: rgb(212, 111, 16);
}
</style>
运行后展示下图
二、绑定动态的样式在data中定义一个属性，然后在需要用到的地方使用 v-bind:class="属性名称"或者使用简写形式:class="属性名称"
<template>
<div :class="myClass">
你好 vue
</div>
</template>
<script>
export default {
data(){
return{
myClass:"green",
}
}
}
</script>
<style lang="scss" scoped>
.green{
width: 100px;
height: 50px;
background:green;
}
</style>
三、绑定多个属性class
在data中定义属性是否显示，即bool类型，true的时候显示属性。在要使用的地方使用key-value的形式
:class="{'active':isActive,'green':isGreen}" 这个意思是isActive为 true的时候显示active样式，放在大括号里，多个属性使用逗号分开
<template>
<div :class="{'active':isActive,'green':isGreen}">
你好 vue
</div>
</template>
<script>
export default {
data(){
return{
myClass:"green",
isActive:true,
isGreen:true
}
}
}
</script>
<style lang="scss" scoped>
.active{
display: block;
font-size: 30px;
color:red;
}
.green{
width: 200px;
height: 50px;
background:green;
}
</style>
展示效果如下，两个都为true的时候，样式起作用
四、混合写法 普通写法与绑定动态属性写法一起使用也是可以的，代码如下
<template>
<div class="green" :class="{'active':isActive}">
你好 vue
</div>
</template>
展示效果跟上图一样
五、使用数组形式绑定
将定义好的样式绑定到data里面的属性，然后，使用:class="[]"绑定多个属性，属性间用逗号分开
<template>
<div :class="[isActive,isGreen]">
你好 vue
</div>
</template>
<script>
export default {
data(){
return{
isActive:"active",
isGreen:"green"
}
}
}
</script>
<style lang="scss" scoped>
.active{
display: block;
font-size: 30px;
color:red;
}
.green{
width: 200px;
height: 50px;
background:green;
}
</style>
六、数组与三元运算符结合判断选择需要的class
<div :class="[isActive?'active':'green']">
解读：当isActive为 true 的时候展示 active 样式 ，false的时候展示 green 样式 七、数组对象结合动态判断
<div :class="[{active:isActive},'green']">
解读：展示green，并且 isActive 为 true 的时候 active 样式生效 八、判断是否绑定一个active样式
<div :class="{'active':isActive==1}">
解读：如果isActive=1 ，那么展示 active 样式
