vue.js 点击div标签时改变样式

1.点击某一项后样式发生改变（循环列表的每一项的样式改变）

效果图

 

v-for循环展示productType中的数据

：class动态绑定样式表中.changeStyle的样式，将当前索引传递给changeSelectStyle

@click点击事件触发函数changeStyle(),并将当前索引传递进去。

   
{{item.name}}

 data(){
    return{
      changeSelectStyle:'',
      productType:[
        {"name":"APE1"},
        {"name":"APE2"},
        {"name":"APE3"},
        {"name":"APE4"},
      ]
  }
}

 

样式表：

.type-name
    height 38px
    text-align center
    line-height 38px 
.changeStyle
    color #0099cc
    background-color #fff

 

changeStyle方法：

让changeSelectStyle的值为当前索引的值

    changeStyle:function(index){
      this.changeSelectStyle = index;
    },

2.切换样式应该是v-bind很常用的功能（单标签样式的改变）

 

          
全部
          

 data(){
    return{
      isshow: true
}

点击后改变文字颜色和图标

.selectAll 
    flex 0 0 37px 
    display flex   
  .text-header
    padding-left 23px 
    flex 0 0 240px 
    border-left 1px solid #0099cc
    border-bottom 1px solid #f7f7f7
    letter-spacing 2px
    line-height 37px 
  .sel-icon
    flex 1
    bg-image('../images/select-icon2')
    background-repeat no-repeat 
    background-size 16px 16px
    width 16px 
    height 16px 
    align-self center
.changeSelectAll
    color #0099cc 
   .sel-icon
    bg-image('../images/select-icon1')

原图及点击后效果

3.实现联动（完整代码）

效果如下：

默认状态，循环列表的每一项都没有被选中。    选中后其中某一项 全部取消，  选中全部，其他项取消选中。

 

html部分