vue 动态绑定class style

最新推荐文章于 2025-06-10 18:10:24 发布

原创最新推荐文章于 2025-06-10 18:10:24 发布 · 467 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue class style

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

css

5 篇文章

订阅专栏

本文介绍了Vue中如何灵活地切换元素样式，包括使用三元表达式、判断绑定、直接绑定及多个class绑定的方法，并展示了如何通过对象样式进行样式设置。

在vue中切换样式的话不需要操作dom 在class 或者style上切换会显得比较方便
还有就是vue里面绑定的class是无法覆盖原class样式的
class

    //三元表达
    :class="isActive ? 'active' : 'no-active'"
    //判断绑定
    :class="{ active: isActive }"
    //直接绑定
    :class="active "
    //多个class
    :class="[activeClass, errorClass]"

style

 // 对象样式
 :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  :style="object"
  let object = {...}
  
 :style="{backgroundImage:`url(${bg02})`,backgroundSize: '100% 100%'}"