点击哪个哪个就高亮显示

<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <a class="mui-control-item" href="#item11" @tap="tab=0" v-bind:class="{'mui-active':tab==0}"><img :src="'img/report/read'+ (tab==0?2:1)+'.png'"/>{{list.read_num}}</a>
                    <a class="mui-control-item" href="#item22" @tap="tab=1" v-bind:class="{'mui-active':tab==1}"><img :src="'img/report/comment'+(tab==1?2:1)+'.png'"/>{{list.cnum}}</a>
                     <a class="mui-control-item" href="#item33" @tap="tab=2" v-bind:class="{'mui-active':tab==2}"><img :src="'img/report/report'+(tab==2?2:1)+'.png'"/>{{list.apply_num}}</a>

                </div>

点击哪个哪个就高亮显示

图片灰色是后面1.高亮是2.比如img/report/read1.png是没点击的灰色效果。img/report/read2.png是点击的高亮效果。点击的时候让后面的数字变成2.