vue.js 实现图片单选功能

vue.js 实现图片点击选中，再次点击取消，每次只能选择一张图片（单选功能）

1. 效果展示

2. HTML部分

本实例主要用v-on与v-bind绑定的点击事件实现，
首先解释一下v-on与v-bind：
v-on: 用来监听 DOM 事件，并在触发时运行一些 JavaScript 代码;
v-bind: 用来响应地更新 HTML 属性。

<div class="circle">
  <ul class="circle-ul">
    <li v-for="(item) of classList" :key="item.id" class="circle-li">
      <div v-on:click="changeList(item.id)" v-bind:class="{changeBorder:item.id==a}" value="change!">
        <img :src="item.coverImg" style="width: 100px;height: 100px;padding-top: 5px;" alt />
        <div class="topic-shade">
          <div class="shade"><img src="@/assets/createtopic_pic/checkbox.png" style="width: 14px;height: 14px;" alt /></div>
        </div>
      </div>
    </li> 
  </ul>
</div>

3. js部分

（1）图片列表显示部分

** 一个需要注意的细节是本地图片路径的写法，一开始用…/，./，绝对路径，反正不管怎么写都不显示。
最后发现需要用到require，并在路径前使用@代替. **

<script>
export default {
  data() {
    return {
      a:true,
      classList: [
        {
          id: "001",
          coverImg:require('@/assets/createtopic_pic/cover_01.png')
        },
        {
          id: "002",
          coverImg:require('@/assets/createtopic_pic/cover_02.png')
        },
        {
          id: "003",
          coverImg:require('@/assets/createtopic_pic/cover_03.png')
        },
        {
          id: "004",
          coverImg:require('@/assets/createtopic_pic/cover_04.png')
        }
      ]
    };
  },
  
};
</script>

（2）js方法部分

这里判断当前点击的图片是哪一张，规定每次只能选择一张，并且如果再次点击就取消选择。

methods: {
    changeList(id){
      if(this.a == id){
          this.a =! this.a;
      }else{
          this.a =id;
      } 
    }
  }

4. css样式

需要注意的部分是 changeBorder 处的样式为鼠标点击变换的样式

<style lang="stylus" scoped>
.circle{
  position: relative;
  width: 632px;
  left: 15px;
}
.circle-ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 532px;
  padding: 0;
  margin: 14px 0 0 50px;
}
.circle-li {
  margin-right: 20px;
  list-style: none;
  margin-bottom: 20px;
   
}
.topic-shade
  display: none;
.changeBorder 
  width: 114px;
  height: 114px;
  position: relative;
  cursor: pointer;
  border: 1px dashed #969696; 
  margin: -1px -8px 0 -8px;
  .topic-shade
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    top: 123.5px;
    right: 0;
    bottom: 0;
    left: 86px;
    .shade
      margin-bottom: 4px;     
</style>