vue实现列表高亮

Vue 列表高亮实现方法

动态类绑定

通过 v-bind:class 或简写 :class 实现条件高亮

<template>
  <ul>
    <li 
      v-for="(item, index) in list" 
      :key="index"
      :class="{ 'highlight': item.isActive }"
      @click="toggleHighlight(index)"
    >
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { text: 'Item 1', isActive: false },
        { text: 'Item 2', isActive: false }
      ]
    }
  },
  methods: {
    toggleHighlight(index) {
      this.list.forEach((item, i) => {
        item.isActive = i === index
      })
    }
  }
}
</script>

<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>

行内样式绑定

使用 :style 直接绑定样式对象

<li 
  v-for="(item, index) in list" 
  :key="index"
  :style="item.isActive ? activeStyle : {}"
>
  {{ item.text }}
</li>

<script>
export default {
  data() {
    return {
      activeStyle: {
        backgroundColor: '#ffeb3b',
        fontWeight: 'bold'
      }
    }
  }
}
</script>

多选高亮实现

支持同时高亮多个列表项

methods: {
  toggleHighlight(index) {
    this.list[index].isActive = !this.list[index].isActive
  }
}

高亮动画效果

添加过渡动画增强用户体验

.highlight {
  transition: all 0.3s ease;
  transform: scale(1.02);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

基于路由的高亮

根据当前路由高亮对应导航项

computed: {
  activeIndex() {
    return this.list.findIndex(item => 
      item.path === this.$route.path
    )
  }
}