如何在 vueJs 中使用动态样式答案

【问题标题】：How to use dynamic style in vueJs如何在 vueJs 中使用动态样式
【发布时间】：2017-05-30 08:03:43
【问题描述】：

有没有办法在 vueJs 组件中读取数据作为 props 并用作

类似：

<my-component color="red" />

并在组件的

【问题讨论】：

【解决方案1】：

v-bind 可以帮助您在 vue.js 中使用动态样式，如 here 所述。

v-bind:style 的对象语法非常简单——它看起来几乎像 CSS，除了它是一个 JavaScript 对象。您可以使用 camelCase 或 kebab-case（在 kebab-case 中使用引号）作为 CSS 属性名称：

HTML

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

vue 实例

data: {
  activeColor: 'red',
  fontSize: 30
}

现在activeColor 在这里是响应式的，每当您更改activeColor 时，它也会在 HTML/CSS 中发生变化。

【讨论】：

我想在部分使用数据值。比如：
@SaJed 我不认为这是可能的，你可以有不同的 CSS 类，你可以按照 here的解释动态更改这些类
实际上我正在使用 datepicker，我需要覆盖它的类以匹配我的主题颜色
我已经对这个类进行了硬编码，它工作正常，但不能使其灵活：.calendar .cell.highlighted { color: #ffffff;背景颜色：#4f8fcc！重要； } #4f8fcc 应该设置 props 值
@SaJed 我正在使用vue-datepicker，我可以在选项变量中发送颜色等。

【解决方案2】：

请注意，对于背景颜色中带有“-”的 CSS 属性，您需要将其编写稍有不同以满足 JS 对象样式。由于 json 对象定义格式不允许 - in name。

这会起作用

v-bind:style="{ 'background-color':backgroundColor }"

这行不通

v-bind:style="{ backgroundcolor:backgroundColor }"

从巴基斯坦一路混乱。 :)

【讨论】：