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>