【1】代码
<div class="btm-segmented-control">
<div class="btm-control-itemx" v-for="(item, index) in resultRange" :key="index"
:class="item.range_code == rangeCode ? 'btm-activex':''"
@click="rangeClick(item.range_code)">{{item.range_name}}
</div>
</div>
vue js:
rangeClick: function(code) { //切换事件
this.rangeCode = code; //设置code值,并添加样式
this.drawScatterChart();
},
循环出来的样式都有'btm-control-itemx', 默认选中的样式'btm-activex'。
item.range_code == rangeCode是设置的默认选中的条件
rangeCode 是data里面定义的初始值
@click="rangeClick(item.range_code)" 是定义的事件,
在该事件里面动态改变rangeCode的值即可实现选中当前样式的效果: 点击其他的样式时,将range_code赋值给rangeCode。
这样就实现了点击样式实现选中效果,而兄弟样式移除了选中效果