Vue2.0点击切换类名改变样式的方法

1、使用index

 
 
 
 
 
 *{
 margin:0;
 padding: 0;
 }
 ul li{
 list-style: none;
 }
 .navul{
 margin:100px auto 20px;
 overflow: hidden;
 }
 .navul li{
 background-color: #5597b4;
 padding:18px 30px;
 float:left;
 color: #fff;
 font-size: 18px;
 cursor: pointer;
 }
 .active{
 background-color: #5597b4;
 }
 .home .home,.new .new,.contact .contact,.service .service{
 background-color: skyblue;
 }
 .checked{
  background: #eff4f7;
 }
 


 
  

   

    
    {{relation.text}}
   
  
 
 
 
 

2、通过改变当前值切换类名

 
 
 
 
 
 .glyphicon-minus{
  color:#08f;
 }
 .glyphicon-plus{
  color:purple;
 }
 
 
 


 
 
  
 
  
  
 
  
 
  
  切换类名按钮
 
  
 
 
 

拓展知识：vue点击改变样式的实例

data里

isActive:-1,

method里

checkedItem(index){
 this.isActive=index;
},

页面里

{{item.name}}

以上这篇Vue2.0点击切换类名改变样式的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。