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

动态设置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
},

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