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

最新推荐文章于 2025-03-15 07:30:00 发布

Twelve--

最新推荐文章于 2025-03-15 07:30:00 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue/React 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43883485/article/details/115911287

Vue/React 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了在Vue.js中如何动态地绑定class和style。包括使用对象语法绑定多个类名，利用数组方式绑定类名，以及如何绑定内联样式。通过不同的示例展示了灵活运用这些绑定技巧的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>