vue3 css使用v-bind实现动态样式

vue3 css使用v-bind实现动态样式

<template><button @click="toggleTheme">切换主题</button><div class="card"></div>
</template><script setup>
import { ref } from 'vue'const primaryColor = ref('#007bff')
const isLarge = ref(false)
const height = ref(200)
const margin = ref(20)function toggleTheme() {// 切换亮色/暗色主题if (primaryColor.value === '#007bff') {primaryColor.value = '#ffc107'isLarge.value = true} else {primaryColor.value = '#007bff'isLarge.value = false}
}
</script><style scoped>
.card {margin-top: v-bind('margin * 2 + "px"');width: v-bind('isLarge ? "300px" : "200px"');height: v-bind('height + "px"');background-color: v-bind(primaryColor);
}
</style>