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

海洋之蓝
  • 137
<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?

回复
阅读 551
2 个回答
✓ 已被采纳

你传就知道了,也可以用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>
你知道吗?

宣传栏