vue项目为循环图加遮罩层

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

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上去的是哪一张图片，哪一个就加遮罩层

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

你应该把isshow放在imglist的每一项中，然后分别控制

isshow 设置成1、2、3
imglist 加个判断isshow分别对应1、2、3
设置鼠标移入移出事件 将isshow分别对应 写个判断class 对应 this.isshow===item.isshow 展示遮罩即可

不用isshow来控制显隐，直接通过js操作css样式即可。

    article(value) {
      let maskLists = document.getElementsByClassName('mask');
      [...maskLists].forEach((item, index) => {
        if (index == value) {
          item.style.display = 'block';
        } else {
          item.style.display = 'none';
        }
      });
    },

注意确保只有你图片的兄弟是叫mask的（名字要确定唯一性，不然不好匹配是哪个的蒙版）

已经写出来了，超简单的，之前没有想到他是兄弟元素，弄成了子元素所以一直设置不起，感谢解答

 <div class="Iimg"  @click="article(index)">
        <img :src="el.coverImg" alt="" />
        <div class="mask"></div>
      </div>


 .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;
        display: none;
      }
       :hover+.mask{
        display: block;
      }
    }