一、普通的绑定样式
直接在style中写好样式，然后直接在需要的地方使用class="定义的样式名称"就可以了
<template>
<div class="green">
你好 vue
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.green{
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{
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{
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{
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 样式
九、使用v-bind:style来绑定CSS内联样式
比如绑定颜色，字体大小等等，样式名称可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
1、对象语法
<!-- 1.基本使用：传入一个对象，并且对象内容都是确定的 -->
<div :style="{color:'red',fontSize:'20px','background-color':'blue'}">Hello</div>
<!-- 2.变量数据：传入一个对象，值会来自于data中定义的数据 -->
<div :style="{color:myColor,fontSize:size}">Hello</div>
<!-- 3.对象数据：直接在data中定义好对象，在这里直接使用 -->
<div :style="styleObj">Hello</div>
data() {
return {
myColor: 'red',
finalFontSize: 50,
styleObj: {
'font-size': '50px',
fontWeight: 700,
backgroundColor: 'red'
}
}
}
2、数组语法
<div :style="[style1Obj, style2Obj]">Hello</div>
data() {
return {
message: "Hello World",
style1Obj: {
color: 'red',
fontSize: '30px'
},
style2Obj: {
textDecoration: "underline"
}
}
}
注意点：
1.样式采用短横线分隔命名方式，需要使用单引号引起来，如 'background-color'
2.属性名冒号后面如果是一个颜色或者值，需要使用单引号，如果是data中定义的变量数据就不用引号，如 :style="{color:'red'}"