vue 列表 鼠标悬浮 内容变色做法

image.png

<template>
  <div>
    <div :class="publicHoverIndex == index ? 'link-item-hover' : 'link-item-hover-remove'"
      @mouseover="publicHoverIndex = index"
      @mouseout="publicHoverIndex = -1"
      v-for="(item, index) in myPublicBankList"
      style="display:flex;"
      :key="index"
    >
      <span>{{ item.cardNo }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      publicHoverIndex: -1,
      myPublicBankList: []
    };
  },
  mounted() {
    this.myPublicBankList = [
      { id: 740, cardNo: "6217 0000 **** **** 001" },
      { id: 741, cardNo: "6222 1111 **** **** 112" }
    ];
  }
};
</script>

<style>
.link-item-hover {
  color: #92c5f3;
}
.link-item-hover-remove {
  color: #b8b8b8;
}
</style>