vue中style与class使用数组与对象的形式

Yetian_2000

于 2020-10-19 10:44:15 发布

阅读量666

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Yetian_2000/article/details/109117865

vue 专栏收录该内容

50 篇文章

订阅专栏

本文介绍Vue.js中动态应用样式和类名的方法，包括如何使用对象形式为元素绑定样式和类名，以及如何根据数据动态切换类名显示状态。

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

style使用对象形式

 :style="{visibility : item.showStatus?'visible':'hidden'}

class使用对象形式

<div @click="tabCardOrTableFn('card')" class="icon-box"  :class="{'focus-type':cardOrTable === 1}">
          <icon-svg type="svgIcon_pic"></icon-svg>
</div>

class使用对象形式（后面写true与false）

<img v-mSrc="item.photoUrl" src="" class="multi-img" :class="{'displaynone':isShowMultiImg}"/>    // isShowMultiImg是data中的数据；