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

动态设置class

1.多个类名判断

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

2.三目判断

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

3.条件判断

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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>

        

          
        
        
        

          

          AI 代码解读
        
      
      

动态设置style

1.条件判断

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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',
        },
    ]
}
 

        

          
        
        
        

          

          AI 代码解读
        
      
      

3.根据函数动态设置

<li v-for="(item,index) in data" :style="topindex()"> {{item.name}} </li>

        

          
        
        
        

          

          AI 代码解读
        
      
      

topindex(){
    let w = '100%';
    var h = this.topData.length;
    var dvpHeight = `height: calc(100% / ${h})`;
    return dvpHeight
},

        

          
        
        
        

          

          AI 代码解读
        
      
      

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