1. After clicking on an item, the style changes （ The style of each item in the circular list changes ）
design sketch
v-for Circular display productType Data in
：class In dynamic binding style sheet .changeStyle The style of , Pass the current index to changeSelectStyle
@click Click event trigger function changeStyle(), And pass in the current index .
<ul v-for="(item,index) in productType" :key="index"> <li class="type-name"
:class="{changeStyle:changeSelectStyle == index}" @click="changeStyle(index)" >{
{item.name}}</li> </ul> data(){ return{ changeSelectStyle:'', productType:[
{"name":"APE1"}, {"name":"APE2"}, {"name":"APE3"}, {"name":"APE4"}, ] } }
style sheet ：
.type-name height 38px text-align center line-height 38px .changeStyle color
#0099cc background-color #fff
changeStyle method ：
Give Way changeSelectStyle The value of is the value of the current index
changeStyle:function(index){ this.changeSelectStyle = index; },
2. The switch style should be v-bind Very common functions （ Change of single label style ）
<div class="selectAll" :class="{selectAll: !isshow,changeSelectAll: isshow}"
@click="isshow=!isshow"> <div class="text-header"> whole </div> <div
class="sel-icon"></div> </div> data(){ return{ isshow: true }
Click to change the text color and icon
.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')
Original image and click effect
3. Realize linkage （ Complete code ）
The effect is as follows ：
Default state , Every item in the circular list is not selected . Select one of the items cancel all , Select All , Other items unselected .
html part
<template> <div class="fliter-container"> <div class="top"> <span
class="back-icon" @click="back()"/> <p class="title"> Product screening </p> </div> <div
class="content"> <div class="left"> <ul v-for="(item,index) in productType"
:key="index"> <li class="type-name" :class="{changeStyle:changeSelectStyle ==
index}" @click="changeStyle(index)" >{{item.name}}</li> </ul> </div> <div
class="right"> <div class="selectAll" :class="{selectAll:
!isshow,changeSelectAll: isshow}" @click="isshow=!isshow"> <div
class="text-header"> whole </div> <div class="sel-icon"></div> </div> <div
class="select-detail" > <div class="selectItem" v-for="(item,index) in
nameoptions" :key="index" :class="{changeSelectItem:changeSelectIndex ==
index&&!isshow}" @click="changeItem(index)" > <div class="text">{
{item.name}}</div> <div class="sel-icon"></div> </div> </div> <div
class="bottom"> <button class="confirm" > determine </button> </div> </div> </div>
</div> </template> <script> export default { data(){ return{ isshow: true,
changeSelectStyle:'', changeSelectIndex:'', productType:[ {"name":"APE1"},
{"name":"APE2"}, {"name":"APE3"}, {"name":"APE4"}, ], nameoptions:[
{"name":"HiLight Lighting car series 1"}, {"name":"HiLight Lighting car series 2"},
{"name":"HiLight Lighting car series 3"}, {"name":"HiLight Lighting car series 4"},
{"name":"HiLight Lighting car series 5"}, {"name":"HiLight Lighting car series 6"},
{"name":"HiLight Lighting car series 7"}, {"name":"HiLight Lighting car series 1"},
{"name":"HiLight Lighting car series 1"}, {"name":"HiLight Lighting car series 1"},
{"name":"HiLight Lighting car series 1"}, {"name":"HiLight Lighting car series 1"},
{"name":"HiLight Lighting car series 2"}, {"name":"HiLight Lighting car series 3"},
{"name":"HiLight Lighting car series 4"}, {"name":"HiLight Lighting car series 5"},
{"name":"HiLight Lighting car series 6"}, {"name":"HiLight Lighting car series 7"},
{"name":"HiLight Lighting car series 1"}, {"name":"HiLight Lighting car series 1"},
{"name":"HiLight Lighting car series 1"}, {"name":"HiLight Lighting car series 1"}, ] } }, methods:{ //
Change the style of category name changeStyle:function(index){ this.changeSelectStyle = index; }, //
Change classification detail style changeItem(index){ this.isshowItem != this.isshowItem; this.isshow =
false this.changeSelectIndex = index; }, back(){
this.$router.push({name:"product"}) } } } </script> <style lang="stylus"
scoped> @import '~common/stylus/mixin' @import '~common/stylus/variable'
.fliter-container width 100% height 100% display flex flex-direction column
.top flex 0 0 40px display flex background-color #0099cc color #fff .back-icon
bg-image('../images/back-icon') background-size 19px 15px background-repeat
no-repeat flex 0 0 19px margin 13px 0 0 15px .title flex 1 align-self center
margin-left 120px letter-spacing 3px .content flex 1 display flex .left
font-size 13px flex 0 0 78px letter-spacing 1px background-color #f7f7f7
.type-name height 38px text-align center line-height 38px .changeStyle color
#0099cc background-color #fff .right flex 1 overflow hidden font-size 13px
display flex flex-direction column .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')
.select-detail flex 1 overflow auto .selectItem height 37px display flex .text
flex 0 0 240px margin-left 23px letter-spacing 1px line-height 37px
border-bottom 1px solid #f7f7f7 .sel-icon flex 1
bg-image('../images/select-icon2') background-repeat no-repeat background-size
16px 16px width 16px height 16px align-self center .changeSelectItem color
#0099cc .sel-icon bg-image('../images/select-icon1') .bottom flex 0 0 50px
width 100% display flex .confirm background-color #0099cc width 124px height
26px color #fff letter-spacing 2px align-self center margin-left 20% border
none </style>
Technology