vue动态设置css的方法

案例一

:style=“{ ‘–color’: color, ‘–fontSize’: fontSize }” 可以直接定义全局样式

<template>
    <div class="demonstration" :style="{ '--color': color, '--fontSize': fontSize }">
        <span>演示样式</span>
    </div>
</template>

<script>
    export default {
        // props:{
        //     color:{
        //         type: String,
        //         default: 'red'
        //     },
        //     fontSize:{
        //         type: String,
        //         default: '18px'
        //     },
        // },
        data(){
            return{
                color: 'red',
                fontSize: '18px'
            }
        }
    }
</script>

<style lang="scss" scoped>
    .demonstration{
        span{
            color: var(--color);
            font-size: var(--fontSize);
        }
    }
</style>

案例二

:class=“{‘color’:judgment}”
:class=“judgment?‘color’:‘’”
:class=“[‘font’,judgment?‘color’:‘’,{‘fontW’:judgment}]”

<template>
    <div class="demonstration">
        <span class="mar" :class="{'color':judgment}">演示样式01</span>
        <span class="mar" :class="judgment?'color':''">演示样式02</span>
        <span class="mar" :class="['font',judgment?'color':'',{'fontW':judgment}]">演示样式03</span>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                judgment: true
            }
        }
    }
</script>

<style lang="scss" scoped>
    .demonstration{
        .mar{
            margin-right: 10px;
        }
        .color{
            color: red;
        }
        .font{
            font-size: 20px;
        }
        .fontW{
            font-weight: 600;
        }
    }
</style>