VUE中样式的动态绑定:class 和:style

:class 和:style动态样式的绑定

:class绑定DOM元素的整体样式

:style绑定DOM元素中的部分样式，例如背景颜色还是字体大小等

:class的使用
1.现在这里定义动态绑定样式的名称
2.编写动态样式的样式
3.绑定动态的样式 :class="[oneClass,twoClass]"

:style的使用
1定义样式名字及内容
2直接绑定对应的DOM元素:style="

（使用了:class 和 :style）

<template>
    <div>
        <h3>class的使用</h3>
        //3.绑定动态的样式  :class="[oneClass,twoClass]" 
        <div :class="[oneClass,twoClass]">样式可以动态的变化1</div>

        <p></p>

        <h3>style的使用</h3>
        //（2）直接绑定对应的DOM元素:style="{backgroundColor:col,fontsize:fsz}
        <div style="width: 300px;height: 100px;margin: 10px auto"
             :style="{backgroundColor:col,fontsize:fsz}">样式可以动态的变化1</div>
    </div>
</template>

<script>
    export default {
        name: "ClassAndStyle",
        data(){
            return{
            //1.现在这里定义动态绑定样式的名称
                oneClass:'classOne',
                twoClass:'classTwo',
            //（1）定义样式名字及内容
                col:'red',
                fsz:'10px',
            }
        }
    }
</script>

<style scoped>
//2.编写动态样式的样式
    .classOne{
        font-size: 30px;
        color: #2c3e50;
    }
    .classTwo{
        width: 400px;
        height: 200px;
        background-color: cornflowerblue;
        margin: 0 auto;
    }
</style>