Vue如何实现style与class样式绑定

Vue开发中,如何实现class与style样式绑定,下面编程教程网小编给大家简单介绍一下!​

style绑定

<div :style="{ color: textColor }"></div>

//多个样式组合
<div :style="[colorStyle, fontStyle]"></div>

class绑定

<div :class="{ myClass: isActive, myOtherClass: !isActive }"></div>

//多个样式组合
<div :class="['myClass', 'myOtherClass']"></div>

<div :class="[isActive ? 'myClass' : '', './css/class.css']"></div>

组合绑定

<div v-bind:class="[isActive ? 'active' : '', 'myClass']" v-bind:style="{color: textColor, fontSize: fontSize }"></div>
以上是编程学习网小编为您介绍的“Vue如何实现style与class样式绑定”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。

本文标题为:Vue如何实现style与class样式绑定

基础教程推荐