vue 动态绑定class

最新推荐文章于 2021-08-17 16:07:14 发布

原创最新推荐文章于 2021-08-17 16:07:14 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #class

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细讲解了JavaScript中如何使用多种方式实现元素的动态class绑定，包括条件判断、对象字面量、三元表达式和数组表达式，适合前端开发者理解和实践。

多种判断动态绑定class

<div :class="{redColor:isShow}"></div>
<div :class="{
        redColor:type==0,
        buleColor:type==1,
        yellowColor:type==2
      }"></div>
<div :class="isShow?'redColor':'buleColor'"></div>
<div :class="[isShow?'redColor':'buleColor','yellowColor']"></div>
<div :class="[{redColor:isShow},'yellowColor']"></div>

data(){
    return {
        ishow:false,
        type:0 , // 0,1,2
    }
}