前端必知必会-Vue CSS 绑定

Vue CSS 绑定

详细了解如何使用 v-bind 通过 style 和 class 属性修改 CSS。

虽然使用 v-bind 更改 style 和 class 属性的概念相当简单，但语法可能需要一些时间来适应。

Vue 中的动态 CSS

您已经了解了如何使用 Vue 通过在 style 和 class 属性上使用 v-bind 来修改 CSS。在 v-bind 下已简要说明，并且还提供了几个使用 Vue 更改 CSS 的示例。

在这里，我们将更详细地解释如何使用 Vue 动态更改 CSS。但首先让我们看两个使中已经看到的技术的示例：使用 v-bind:style 进行内联样式设置和使用 v-bind:class 分配类

内联样式

我们使用 v-bind:style 在 Vue 中进行内联样式设置。

示例
<input type="range"> 元素用于使用内联样式更改 <div> 元素的不透明度。

<input type="range" v-model="opacityVal">
<div v-bind:style="{ backgroundColor: 'rgba(155,20,20,'+opacityVal+')' }">
拖动上面的范围输入以在此处更改不透明度。
</div>