当前位置：首页 > VUE

vue实现li高亮效果

2026-01-21 12:37:23VUE

Vue实现li高亮效果的方法

方法一：使用动态class绑定 通过v-bind:class或简写:class动态切换高亮样式，结合v-for渲染列表：

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

<script>
export default {
  data() {
    return {
      list: [
        { text: 'Item 1' },
        { text: 'Item 2' },
        { text: 'Item 3' }
      ],
      activeIndex: -1
    }
  }
}
</script>

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

方法二：使用内联样式 通过:style直接绑定样式对象，适合需要动态计算样式的场景：

<li 
  v-for="(item, index) in items"
  :key="index"
  :style="{
    backgroundColor: activeId === item.id ? '#ffeb3b' : '',
    color: activeId === item.id ? '#000' : ''
  }"
  @click="activeId = item.id"
>
  {{ item.name }}
</li>

方法三：使用计算属性 当高亮逻辑较复杂时，可通过计算属性返回样式或class：

computed: {
  liClasses() {
    return this.items.map(item => ({
      'active-item': this.selectedItem === item.id,
      'disabled': item.disabled
    }))
  }
}

方法四：组件化封装 对于复用场景，可封装为可配置的组件：

<highlight-list 
  :items="dataList" 
  highlight-class="custom-highlight"
  @item-click="handleClick"
/>

注意事项

高亮状态应存储在组件data或Vuex中
移动端建议添加:active伪类提升点击反馈
性能优化：大数据列表使用v-virtual-scroll避免DOM过度渲染

vue实现li高亮效果

标签: 效果 vue

分享给朋友：

vue实现访问量

Vue 实现访问量统计的方法使用前端计数在 Vue 中可以通过简单的计数器实现页面访问量的统计。这种方法适合小型项目或演示用途。 // 在 Vue 组件中 data() { return…

vue实现一个标签选择

Vue 标签选择组件实现基础实现使用 Vue 的 v-for 和 v-model 指令可以快速实现标签选择功能： <template> <div class="tag-se…

vue实现生成二维码

使用qrcode.vue库生成二维码安装qrcode.vue库： npm install qrcode.vue --save 在Vue组件中使用： <template> <…

vue原型实现

Vue 原型实现的关键点 Vue.js 的原型系统是其响应式机制的核心部分，通过原型链实现数据的动态绑定和依赖收集。以下是实现 Vue 原型的主要技术要点。数据响应式原理 Vue 通过 Objec…

vue实现alert

实现自定义 Alert 组件在 Vue 中可以通过组件化方式实现自定义 Alert 弹窗。以下是基于 Vue 3 的实现示例：组件代码 (Alert.vue) <template&g…

vue实现方法

Vue 实现方法 Vue 是一种流行的前端框架，用于构建用户界面和单页应用。以下是几种常见的 Vue 实现方法：创建 Vue 实例通过 new Vue() 创建一个 Vue 实例，传入配置对象，…

vue实现li高亮效果