vue组件列表鼠标移入移出效果

最近会更很多小的demo，当作初学者的初步学习记录

1.预期达成

鼠标移入列表，所移入的项修改背景色，点击某一项可以修改其背景色

2.实现效果

鼠标移入移出修改背景.gif

3.代码实现

<template>
  <div>
    <h1>背景颜色选中及鼠标移入移出效果</h1>
    <div>
      <ul>
        <!-- class还可以通过:class="[currentLi === index ? 'currentLi' : '']"的形式 -->
        <li
          v-for="(item, index) in fruitList"
          :key="`fruititem${index}`"
          @click="currentLi = index"
          class="fruit-item"
          :class="{currentLi: currentLi === index}"
        >
          当前是否被选中：{{ currentLi === index }}
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruitList: [
        { name: "香蕉", amount: 30 },
        { name: "苹果", amount: 80 },
        { name: "西瓜", amount: 20 },
      ],
      currentLi: -1,
    };
  },
  methos: {},
};
</script>

<style lang="scss" scoped>
h1{
  font-size: 32px;
  text-align: center;
}
.fruit-item {
  width: 1200px;
  height: 200px;
  background: rgb(238, 237, 231);
  margin-bottom: 20px;
}
// 选中效果
.currentLi{
  background: darksalmon;
}
// 移入效果
.fruit-item, .currentLi{
  &:hover{
    background: rgb(155, 173, 123);
  }
}
</style>