image.png
可全不选，可单选
<ul class="Flex">
<li
v-for="(item,index) in linst"
:key="index"
:class="selectedNum==index?'active':''"
@click="select(index)"
>{{item}}</li>
</ul>
linst: ["1", "2", "3", "4"],
selected: "", //单选
checkbox: [],
selectedNum: 0, //默认选中项
select(i) {
if (this.selectedNum === i) {
this.selectedNum = -1; //取消选中
} else {
this.selectedNum = i;
}
样式设置
.Flex {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
}
ul > li {
line-height: 40px;
padding: 0 20px;
border: beige solid 1px;
margin-left: 10px;
}
.active {
background: #4990ce;
border: #4990ce;
color: #fff;
}
