vue v-for渲染列表，前三个元素覆盖蒙版，点击消失

Z时代
2024-02-13
分类：IT

有很多一样的列表，第一二三项上面有个蒙层，点击蒙层消失，显示下面的内容

li span{display:none;}li.has-mask span{display:block;}

这样的列表有N多个，每个效果都一样，前三名点击蒙版，蒙版消失

<ul>
    <li>1<span>蒙版</span></li>
    <li>2<span>蒙版</span></li>
    <li>3<span>蒙版</span></li>
    <li>4</li>
    <li>5</li>
    <li>6</li></ul>

<li 
    v-for="(item, index) in list" 
    :class="{'`has-mask`': index <= 2}"
>
    <span @click='hideMask(index)'>蒙版</span></li>

现在不知道hideMask方法如何实现？

回答：

<template>
<ul>
  <li v-for="(item, index) in list" :class="{'has-mask': item.hasMask}">
    {{content}}
    <div class="mask" v-if="item.hasMask" @click="hideMask(index)">蒙版</div>
  </li>
</ul>
<template>
<script>
export default {
  data() {
    return {
      list: null,
    };
  },
  methods: {
    async fetchList() {
      const list = await fetch();
      this.list = [
        ...list.slice(0, 3).map(item => ({...item, hasMask: true})),
        ...list.slice(3),
      ];
    },
    hideMask(index) {
      this.list[index].hasMask = false;
    },
  },
}</script>