Vue3 v-bind绑定css中的var变量实现动态样式
<template>
<div :style="{ '--brand-color': brandColor }">
<!-- 其他内容 -->
</div>
</template>
<script>
export default {
data() {
return {
brandColor: 'blue'
}
}
}
</script>
<style>
/* 使用CSS变量的样式 */
.button {
background-color: var(--brand-color);
color: var(--brand-color);
}
</style>这个例子中，我们在Vue组件的data中定义了一个brandColor属性，并在:style绑定中使用它来动态设置CSS变量--brand-color的值。这样，你可以根据需要动态更改按钮的颜色，而不需要为每种颜色写一个新的CSS类。
评论已关闭