Vue3中点击div标签获取innerHTML及获取v-for生成的div内数字的实现方法

嘿，我来帮你解决这两个Vue3的问题，两种场景都有简单直接的处理方式，咱们一个个说：

在Vue3里，你可以通过事件对象来获取绑定点击事件的元素的innerHTML。具体步骤：

• 在模板的@click指令里传入$event参数，把事件对象传递给方法
• 在方法中通过event.currentTarget.innerHTML拿到目标元素的innerHTML（用currentTarget比target更靠谱，因为如果div里有子元素，target可能指向子元素，而currentTarget始终是绑定事件的那个div）

示例代码：

<template>
  <div @click="getInnerHTML($event)" class="demo">这是测试内容<span>（包含子元素）</span></div>
</template>

<script setup>
function getInnerHTML(event) {
  const elementHTML = event.currentTarget.innerHTML;
  console.log("获取到的innerHTML：", elementHTML);
  // 这里可以对innerHTML做后续操作
}
</script>

针对你给出的v-for代码，我更推荐直接传递循环变量的方式，这符合Vue数据驱动的理念，不用操作DOM，更简洁可靠：

• 在@click里直接把循环变量n传给方法
• 方法里直接接收这个参数，就能拿到对应的数字

修改后的完整代码：

<template>
  <div @click="doSth(n)" class="days" v-for="n in 7" :key="n">{{n}}</div>
</template>

<script setup>
function doSth(num) {
  console.log("点击的数字是：", num);
  // 在这里对num进行你需要的操作即可
}
</script>

如果你非要通过获取innerHTML的方式来实现（不推荐，因为不够直观且可能有潜在问题，比如内容里有非数字字符时转译出错），也可以这么写：

<template>
  <div @click="doSth($event)" class="days" v-for="n in 7" :key="n">{{n}}</div>
</template>

<script setup>
function doSth(event) {
  // 把innerHTML转成数字
  const num = parseInt(event.currentTarget.innerHTML);
  console.log("点击的数字是：", num);
}
</script>

内容的提问来源于stack exchange，提问作者iman hosseingholizadeh