一个LI列表，请问我怎么才能知道当前点击的是第几个LI？

Z时代
2024-03-07
分类：IT

<div class="rechargelist">
            <van-form @submit="buysubmit">
                <ul>
                    <li @click="clickHandle($event)" class="default">10积分</li>
                    <li @click="clickHandle($event)" class="default">50积分</li>
                    <li @click="clickHandle($event)" class="default">100积分</li>
                    <li @click="clickHandle($event)" class="default">300积分</li>
                    <li @click="clickHandle($event)" class="default">500积分</li>
                </ul>
.....
methods: {
            clickHandle(e){

请问在clickHandle函数中，我怎么才能获取到当前点击的是第几个LI？

回答：

你传就知道了，也可以用v-for循环

<div class="rechargelist">
            <van-form @submit="buysubmit">
                <ul>
                    <li @click="clickHandle($event,1)" class="default">10积分</li>
                    <li @click="clickHandle($event,2)" class="default">50积分</li>
                    <li @click="clickHandle($event,3)" class="default">100积分</li>
                    <li @click="clickHandle($event,4)" class="default">300积分</li>
                    <li @click="clickHandle($event,5)" class="default">500积分</li>
                </ul>
.....
methods: {
            clickHandle(e,index){

用v-for：

<template>
  <ul>
    <li
      v-for="(item, index) in list"
      :key="index"
      @click="clickHandle(index)"
      class="default"
    >
      {{ item }}积分
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      list: ["10", "50", "100", "300", "500"]
    };
  },
  methods: {
    clickHandle(index) {
      console.log(index);
    }
  }
};</script>

回答：

除了改方法传参，还可以这样，不需要修改源代码

<template>
  <div id="app">
    <ul>
      <li @click="clickHandle($event)" class="default">10积分</li>
      <li @click="clickHandle($event)" class="default">50积分</li>
      <li @click="clickHandle($event)" class="default">100积分</li>
      <li @click="clickHandle($event)" class="default">300积分</li>
      <li @click="clickHandle($event)" class="default">500积分</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    clickHandle(e) {
      const list = Array.from(document.querySelectorAll(".default"));
      return list.findIndex((o) => o === e.target);
    },
  },
};</script>