当前位置：首页 > VUE

vue实现列表点击

2026-03-10 12:27:40VUE

Vue 实现列表点击交互

使用 `v-for` 渲染列表

通过 v-for 指令动态渲染列表数据，结合 :key 确保渲染性能：

<template>
  <ul>
    <li 
      v-for="(item, index) in items" 
      :key="item.id"
      @click="handleItemClick(item)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

定义点击事件方法

在 methods 中定义点击事件处理逻辑，可获取当前点击的列表项数据：

vue实现列表点击

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ]
    }
  },
  methods: {
    handleItemClick(item) {
      console.log('点击项:', item);
      // 执行后续业务逻辑
    }
  }
}
</script>

高亮当前选中项（可选）

通过动态类名实现点击高亮效果：

<li 
  v-for="item in items"
  :class="{ 'active': selectedItem === item }"
  @click="selectedItem = item"
>
  {{ item.name }}
</li>

需在 data 中定义 selectedItem 变量：

vue实现列表点击

data() {
  return {
    selectedItem: null
  }
}

事件修饰符应用

使用 .stop 阻止事件冒泡或 .prevent 阻止默认行为：

<li @click.stop="handleClick">阻止冒泡的点击</li>
<a @click.prevent="handleLinkClick">阻止默认跳转</a>

性能优化建议

对于长列表，建议使用 vue-virtual-scroller 等虚拟滚动方案，避免渲染大量 DOM 节点导致性能下降。事件处理函数应避免复杂计算，必要时使用防抖/节流。

完整示例代码

<template>
  <ul class="item-list">
    <li
      v-for="item in items"
      :key="item.id"
      :class="{ 'active': activeId === item.id }"
      @click="selectItem(item)"
    >
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      activeId: null,
      items: [
        { id: 1, text: '列表项1' },
        { id: 2, text: '列表项2' }
      ]
    }
  },
  methods: {
    selectItem(item) {
      this.activeId = item.id
      this.$emit('item-selected', item)
    }
  }
}
</script>

<style>
.item-list li {
  cursor: pointer;
  padding: 8px 12px;
}
.item-list li.active {
  background-color: #eee;
}
</style>