vue绑定class

1 绑定class样式

绑定class样式采用v-bind来绑定 v-bind;class="xxx"或者:class="xxx"

2 绑定对象

<template>
<div :class="{text:Text,colour:red}">绑定对象div>
template>
<script>
 
export default{
    data(){
        return{
            Text:true,
            red:true
        }
    }
}
script>
<style>
    .text{
        font-size: 30px;
    }
    .colour{
        color: red;
    }
style>

      3多个对象绑定

        

<template>
<div :class="classOject">多个绑定对象div>
template>
<script>
 
export default{
    data(){
        return{
            classOject:{
                Text:true,
                red:true
            }
           
        }
    }
}
script>
<style>
    .text{
        font-size: 30px;
    }
    .colour{
        color: red;
    }
style>

4数组绑定

        

<template>
<div :class="[Text,red]">数组绑定div>
template>
<script>
 
export default{
    data(){
        return{
            Text:text,
            red:colour
        }
    }
}
script>
<style>
    .text{
        font-size: 30px;
    }
    .colour{
        color: red;
    }
style>