<template>

    <div> Index : {{activeIndex}} </div>

  <div class="list">
    <div
      v-for="(item, index) in items"
      :key="index"
      :class="{'active': activeIndex === index}"
      class="list-item"
      @click="setActive(index)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref(['項目一', '項目二', '項目三', '項目四']);
const activeIndex = ref(null);

const setActive = (index) => {
  activeIndex.value = index;
};
</script>

<style scoped>
.list {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.list-item {
  height: 50px; /* 調整每個項目的高度 */
  line-height: 50px; /* 讓文字垂直居中 */
  padding: 0 10px; /* 調整水平內邊距 */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.list-item:hover {
  background-color: #f0f0f0;
}

.list-item.active {
  background-color: #409eff;
  color: white;
}
</style>