动态循环li，鼠标移入展示不同详情数据

实现效果

 

完整代码

 

 

 

 

 

 样式就随便写了，数据自己造的假数据，后台格式也差不多，自行修改哈

源代码：

<template>
  <div id="box">
    <ul>
      <li
        v-for="(item, index) in liData"
        :key="index"
        ref="selectedColor"
        @mouseenter="mouseOver(item, index)"
        @mouseleave="mouseLeave(item, index)"
      >
        <div v-show="boxDetail != index" class="divStyle">
          <img :src="item.img" alt="" style="width: 80px" />
          <span style="font-size: 22px; margin: 15px 0">{{ item.title }}</span>
          <span style="color: #2e8aee"
            >担保金额:
            <i style="font-size: 20px">{{ item.money }}</i> 万元</span
          >
        </div>
        <!-- 鼠标移入展示详情 -->
        <div class="divDetail" v-show="boxDetail == index">
          <span style="font-size: 22px;margin-top:30px;">{{ item.title }}</span>
          <span
            >描述: <i>{{ item.detail }}</i></span
          >
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      liData: [
        {
          img: require("../assets/twoStageImg/yuzhidai.png"),
          title: "余值贷",
          money: "100",
          detail: "介绍余值贷详情.................",
        },
        {
          img: require("../assets/twoStageImg/zengxindai.png"),
          title: "征信贷",
          money: "180",
          detail: "介绍征信贷详情.................",
        },
        {
          img: require("../assets/twoStageImg/zhengyindan.png"),
          title: "政银贷",
          money: "200",
          detail: "介绍政银贷详情.................",
        },
        {
          img: require("../assets/twoStageImg/gongyedai.png"),
          title: "工业贷",
          money: "300",
          detail: "介绍工业贷详情.................",
        },
      ],
      // 原本默认为false，但是发现当页面第一次进入的时候第一项不显示，后来改为null就可以，具体不知道为啥，反正改为null就可以了哈
      boxDetail: null,
    };
  },
  methods: {
    // 鼠标移入
    mouseOver(item, index) {
      this.$refs.selectedColor[index].style.background = "sandybrown";
      if (this.boxDetail == index) {
        this.boxDetail = -1;
      } else {
        this.boxDetail = index;
      }
    },
    //鼠标离开
    mouseLeave(item, index) {
      this.$refs.selectedColor[index].style.background = "#fff";
      if (this.boxDetail != index) {
        this.boxDetail = index;
      } else {
        this.boxDetail = -1;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#box {
  width: 100%;
  height: 100%;
}
i {
  font-style: normal;
}
ul {
  width: 100%;
  padding-top: 20px;
  display: flex;
  li {
    list-style: none;
    width: 15%;
    height: 380px;
    margin: 20px 10px;
    border: 1px solid sandybrown;
    border-radius: 10px;
    .divStyle {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .divDetail {
      color: #fff;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      //   justify-content: center;
      align-items: center;
    }
  }
}
</style>