vue动态改变css样式

要求：切换按钮后改变css的样式

实现思路：循环数组，然后添加点击事件，获取到当前点击的index 根据数组的下标去动态的改变样式。

          

              
状态筛选
              {{item.name}}
          
          

            
分类筛选
            {{item.name}}
          
        

 data中需要定义的数据信息

 activeIndex:0,//状态筛选的图片
 activeIndexs:0,//分类筛选的图片

事件中方法的处理

  //todo 查看当前选中的时那个状态的value值
    checknow(index,info){
      // 2组不同的值循环尽量用同一个方法时要有区分因为你循环的是2次数组，不是嵌数组
      if(info === 'status'){
         this.activeIndex = index
      }
       if(info === 'type'){
         this.activeIndexs = index
      }
    },

css样式

.cross-state{
  padding: 1rem;
  font-size: .8rem;
  .sure{
    color: #ffffff;
  }
  h3{
    color: #333333;
    font-weight: 600;
  }
 .chose_type {
  width: 5.2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  background: #42E5BA;
  border-radius: .2rem;
  color: white;
  display: inline-block;
  margin-top: 0.4rem;
  margin-left: .12rem;
}
.normal_type {
  width: 5.2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  background: #F5F5F5;
  border-radius: .2rem;
  display: inline-block;
  margin-top: 0.4rem;
  color: #666666;
  font-size: .7rem;
  margin-left: .12rem;
}
}

 实现结果：