做出如上效果
利用:class="item.ischeck == true ? 'btn_selected' : ''"
三元表达式判断是否选中并改变样式
代码片段如下:
<div class="intent_btn">
<van-button style="width: .90rem;" v-for="(item, index) in List" :key="index" :class="item.ischeck == true ? 'btn_selected' : ''"
size="medium" @click="buttonSelectOne(index, item, List)">{{item.name}}</van-button>
</div>
data:{
List:[
{val: 1, ischeck: false, name: "1"},
{val: 2, ischeck: false, name: "2"},
{val: 3, ischeck: false, name: "3"},
{val: 4, ischeck: false, name: "4"},
{val: 5, ischeck: false, name: "5"},
{val: 6, ischeck: false, name: "更多"}
]
}
methods:{
// 单选按钮
buttonSelectOne(index, item, arr){
// if(item.ischeck == false){
for(var i=0; i<arr.length; i++){
arr[i].ischeck = false;
}
item.ischeck = true;
}
}
<style>
.intent_btn {
padding: 0.12rem;
border-bottom: 1px solid #E5E5E5;
display: flex;
flex-wrap: wrap;
.van-button{
height: .5rem;
border-color: #A2A7AD;
border-radius: .05rem;
background-color: #FFFFFF;
margin-left: .07rem;
margin-right: .08rem;
font-size: .24rem;
color: #A2A7AD;
text-align: center;
margin-top: 0.07rem;
padding: 0 0.16rem;
width: max-content;
}
.btn_selected{
color: #40A1FF;
border-color: #40A1FF;
background-image: url(../../assets/images/select.png);
background-size: .36rem;
background-position: bottom right;
background-repeat: no-repeat;
}
}
</style>
多选如下:
// 多选按钮
buttonSelected(index, item){
if(!this.selectArr.includes(item.name)){
item.ischeck = true;
this.selectArr.push(item.name);
} else {
item.ischeck = false;
var index = this.selectArr.indexOf(item.name, 0)
if(index>-1){
this.selectArr.splice(index, 1);
}
}
// console.log(this.selectArr)
},