Vue button多选单选问题（点击选中可改变样式）_三元表达式判断按钮是否可以点击

​
做出如上效果

利用: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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

多选如下：

// 多选按钮
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)

},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15