vue项目为循环图加遮罩层

Question

问题遇到的现象和发生背景

vue项目给循环拿出来的图片加上一个遮罩层，

用代码块功能插入代码，请勿粘贴截图

<template>
  <ul>
    <li v-for="(el, index) in imglist" :key="index" @click="article">
      <div class="Iimg">
        <img :src="el.src" alt="" @click="mask(el)" />
        <div class="mask" v-if="isshow"></div>
      </div>
  </li>
  </ul>
  
</template>

<script>
export default {
  name: "img",
  data() {
    return {
      isshow:'false',
      // chengColor
      imglist: [
        {
          src: "https://img.shijue.me/b85e8d92fe58420697959f3b8daaac31_d.jpg!dp1",
          usrc:
            "https://img.shijue.me/ad794a194472e9237e9dcd170d18e7885_d/avatar/70eaae3a0c6c4f5682d89fc429b21477.png!da1",
          t1: "浮生绘影 智创未来",
          t2: "朵朵花开",
          num: 65,
        },
        {
          src: "https://img.shijue.me/a71a61259f8d4bb78992b417544ac692_d.jpeg!dp1",
          usrc:
            "https://img.shijue.me/ad794a194472e9237e9dcd170d18e7885_d/avatar/70eaae3a0c6c4f5682d89fc429b21477.png!da1",
          t1: "浮生绘影 智创未来",
          t2: "朵朵花开",
          num: 65,
        },
        {
          src: "https://img.shijue.me/b85e8d92fe58420697959f3b8daaac31_d.jpg!dp1",
          usrc:
            "https://img.shijue.me/ad794a194472e9237e9dcd170d18e7885_d/avatar/70eaae3a0c6c4f5682d89fc429b21477.png!da1",
          t1: "浮生绘影 智创未来",
          t2: "朵朵花开",
          num: 65,
        }, ],
    };
  },
 methods: {
    mask(el) {
      console.log(el);
      console.log(this.isshow,"111111");
      this.isshow = !this.isshow
      console.log(this.isshow,"222222");
    }

  },
</script>

<style lang="scss" scoped>
.Iimg {
      border: 10px solid #fff;
      margin: 10px;
      line-height: 0.5;
      position: relative;

      img {
        width: 254px;
        height: 203px;
        // padding:5px 5px;
      }
       .mask {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 254px;
        height: 203px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        // display: none;
      }
    }
</style>

运行结果及报错内容

无报错，但要么只能显现或者全部影藏

我的解答思路和尝试过的方法

给循环的图片加上鼠标移动事件或点击事件，遮罩层绑定显示影藏的isShow打印出来实在真和假之间循环无法实现功能

我想要达到的结果

hover上去的是哪一张图片，哪一个就加遮罩层

Answer 1

你这么写肯定是要么都显示，要么都隐藏的啊