当前位置：首页 > VUE

vue实现列表点击

2026-02-18 22:58:58VUE

实现列表点击功能

在Vue中实现列表点击功能，可以通过v-for指令渲染列表，并结合v-on或@click监听点击事件。以下是具体实现方法：

模板部分

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

脚本部分

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  },
  methods: {
    handleClick(item) {
      console.log('Clicked item:', item)
      // 可以在这里执行其他操作，如跳转路由、更新状态等
    }
  }
}
</script>

高亮当前选中项

如果需要高亮当前选中的列表项，可以添加动态class：

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

<script>
export default {
  data() {
    return {
      selectedItem: null,
      list: [/* ... */]
    }
  }
}
</script>

传递额外参数

有时需要同时传递索引或其他参数：

<li 
  v-for="(item, index) in list"
  @click="handleClick(item, index, $event)"
>
  {{ item.name }}
</li>

methods: {
  handleClick(item, index, event) {
    console.log(item, index, event)
  }
}

使用事件修饰符

Vue提供了事件修饰符来简化常见操作：

<!-- 阻止默认行为 -->
<li @click.prevent="handleClick(item)">

<!-- 停止事件冒泡 -->
<li @click.stop="handleClick(item)">

<!-- 只在左键点击时触发 -->
<li @click.left="handleClick(item)">

性能优化

对于大型列表，考虑使用事件委托：

vue实现列表点击

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

methods: {
  handleListClick(event) {
    const id = event.target.dataset.id
    if (id) {
      const item = this.list.find(item => item.id === Number(id))
      if (item) this.handleItemClick(item)
    }
  }
}