vue常见的动态设置class的几种方式

505 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第3天,点击查看活动详情

学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~
如果大家喜欢,可以点赞或留个言哦💕~~~~,谢谢大家⭐️⭐️⭐️~~~

动态设置class

1.多个类名判断

:class ="{'class1':condition==='0','class2':condition==='1' }"
//冒号前为类名后为条件

2.三目判断

 :class="data===1?'css样式1':'css样式2'"

3.条件判断

:class="index%2>0?'bluePattern':'redPattern'"

4.切换样式

:class="{'activities':Index===index}"
//例如li、tab适用
<li v-for="(item,index) in data" @click="toggleTabs(item,index)"
    :class="{active:index==nowIndex}">{{item.name}}
</li>

动态设置style

1.条件判断

:style="{ width: clickTerminal ? '89%' : '100%' }"

2.根据数据动态设置

<li v-for="(item,index) in data" :style="{'background':item.color}">
    {{item.name}}
</li>
data: function () {
    data:[
        {
            name:'xxx系统',
            color:'red',
            id:'1',
        },
        {
            name:'yyy系统',
            color:'pink',
            id:'2',
        },
    ]
}
 

3.根据函数动态设置

<li v-for="(item,index) in data" :style="topindex()"> {{item.name}} </li>
topindex(){
    let w = '100%';
    var h = this.topData.length;
    var dvpHeight = `height: calc(100% / ${h})`;
    return dvpHeight
},

谢谢大家阅读⭐️⭐️⭐️,如果喜欢,可以点赞或留言哟💕💕💕

专栏推荐

推荐一下自己的专栏,欢迎大家收藏关注😊~

往期热门文章