Vue 强制绑定

在某些应用界面中，某些元素的样式是变化的，class/style 绑定就是专门来实现动态样式效果的技术

class绑定：  ：class=‘xx’ xx可以是字符串、对象、数组

1、class：字符串   动态样式与固定样式

<template>
    <div>
        <h2>1.class绑定: :class='xxx'</h2>
        <p class="cclass" :class="a">xx是字符串</p>
        <button @click="update">变色</button>
        <h2>2. style绑定</h2>
    </div>
</template>
<script>
export default{
data() {
    return {
        a:'aclass'
    }
},
methods:{
    update() {
    this.a='bclass'
    },
}
}
</script>
<style lang="less" scoped>
.aclass{
    color: red;
}
.bclass{
    color: green;
}
.cclass {
    font-size: 20px;
}
</style>

 2、class：对象

 <p :class="{aclass:isA,bclass:isB}">xx是对象</p>

data() {
    return {
        a:'aclass',
        isA:true,
        isB:false
    }

update() {
    this.a='bclass',
    this.isA=false,
    this.isB=true
    },

3、class：数组

<p :class="['aclass','cclass']">xx是数组</p>

style 绑定

        <p :style="{color:activeColor,fontSize:fontsize + 'px'}">style</p>


data() {
    return {
        a:'aclass',
        isA:true,
        isB:false,
        activeColor:'red',
        fontsize:20
    }
},
methods:{
    update() {
    this.a='bclass',
    this.isA=false,
    this.isB=true,
    this.activeColor='blue',
    this.fontsize=60

    },
}

 效果：