Vue 的 class 和 style

class 和 style

• 使用动态属性
• 使用驼峰式写法

<template>
    <div>
        <p :class="{ black: isBlack, yellow: isYellow }">使用 class</p>
        <p :class="[black, yellow]">使用 class （数组）</p>
        <p :style="styleData">使用 style</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isBlack: true,
            isYellow: true,
            black: 'black',
            yellow: 'yellow',
            styleData: {
                fontSize: '40px', // 转换为驼峰式
                color: 'red',
                backgroundColor: '#ccc' // 转换为驼峰式
            }
        }
    }
}
</script>
<style scoped>
    .black {
        background-color: #999;
    }
    .yellow {
        color: yellow;
    }
</style>