css 动态style

在Vue的单文件组件中，可以通过使用v-bind指令将CSS值与动态组件状态关联起来。你可以使用字符串、对象、CSS模块和自定义注入名称来实现动态的CSS样式。

使用字符串方式，你可以在template中定义一个class，然后在style标签中使用v-bind绑定动态的颜色值。例如：

<template>
  <div :class="cssStyle">css-style</div>
</template>

<script>
import { ref } from 'vue';
const colorRed = ref("red");
</script>

<style lang="less" scoped>
.css-style {
  color: v-bind(colorRed);
}
</style>

使用对象方式，你可以在template中定义一个class，然后在style标签中使用v-bind绑定一个对象的颜色属性。例如：

<template>
  <div :class="cssStyle">css-style</div>
</template>

<script>
import { ref } from 'vue';
const obj = ref({ color: "red" });
</script>

<style lang="less" scoped>
.css-style {
  color: v-bind('obj.color');
}
</style>

使用CSS模块方式，你可以在style标签中使用module属性，并将生成的CSS类作为$style对象的键暴露给组件。例如：

<template>
  <div :class="$style.red">$style.red</div>
</template>

<style module>
.red {
  color: red;
}
</style>

使用自定义注入名称，你可以在style标签的module属性中定义一个自定义的名称，然后在class中使用该名称。例如：

<template>
  <div :class="[zxx.red, zxx.border">$style.red</div>
</template>

<style module="zxx">
.red {
  color: red;
}
.border {
  border: 1px solid #000;
}
</style>

最后，你还可以在template中使用数组形式来指定动态的CSS样式。例如：

<div :style="[baseStyles, overridingStyles"></div>
<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}"></div>

以上是关于在Vue中如何使用CSS动态样式的几种方式。希望对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [css Style、动态样式](https://blog.csdn.net/weixin_45137240/article/details/131042283)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [动态样式绑定--style 和 class](https://blog.csdn.net/lzfengquan/article/details/125521472)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]