vue绑定多个class和多个style的方式

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue绑定多个class和多个style的方式相关的知识,希望对你有一定的参考价值。

class绑定多个

// isActive 为true就会加active的class,同理isRed
<div :class="{'active':isActive,'red':isRed}"></div>
// 也可以这样写
<div class="red" :class="{'active':isActive}"></div>
// 数组的方式
<div :class="[active,red]"></div>
// 三目运算
<div :class="[flag ? active : red]"></div>

style绑定多个

// 单个style
<div :style="{'color':activeColor,'fontSize':fontSize}"></div>
// 单个对象形式
<div :style="styleObject"></div>
// 多个对象形式
<div :style="[baseStyle,newStyle]"></div>

以上是关于vue绑定多个class和多个style的方式的主要内容,如果未能解决你的问题,请参考以下文章

vue中的class与style绑定

VUE强制绑定class和style

vue-03-style与class

Vue绑定class与绑定内联样式--v-bind

Vue教程:Class 与 Style 绑定

Vue知识整理9:class与style绑定