js实现单选功能

天使凯莎的小迷弟

已于 2022-03-10 15:32:33 修改

阅读量1.6k

点赞数

分类专栏： vue 前端 js 文章标签： javascript linq p2p

于 2022-03-10 11:05:54 首次发布

本文链接：https://blog.csdn.net/Polaris_best/article/details/123396303

版权

前端同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

html部分

 <div class="cards" v-for="(e, index) in userList" :key="index">
     <div class="imges">
         <img src="./img/xzh.png" alt="" class="imgselect" v-if="e.isChecked" 
            @click="userClick1(e, index)" />
         <img src="./img/xz.png" alt="" class="imgselect" v-else @click="userClick1(e, 
            index)" />
         <span>{{e.name}}</span>
     </div>        
</div>

js部分

this.userList.map((item) => {
    item.isChecked = false
})

this.userList = this.current > 1 ? [...this.userList, ...res.data.records] : 
res.data.records

 userClick(row, index) {
      if (this.userList[index].isChecked) {
        this.userList[index].isChecked = false //取消
        this.selectUser = {}
      } else {
        this.userList.map((item) => {
          item.isChecked = false
        })
        this.userList[index].isChecked = true
        this.selectUser = row
      }
  },

效果图