通过单击 vue3 中的 div 标签获取 innerHTML答案

【问题标题】：Get innerHTML via clicking on a div tag in vue3通过单击 vue3 中的 div 标签获取 innerHTML
【发布时间】：2021-10-30 04:05:23
【问题描述】：

我想在 click 事件发生时通过 vue3 中的 v-for 属性生成 div 标记之间的数字。该怎么做？

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

<script>
    methods : {
       doSth() {
           // get {{n}} from inside a div tag when clicking on it and do something on it.
       }
    }
</script>

【问题讨论】：

标签： javascript vuejs3

【解决方案1】：

只需在方法中捕获事件目标，然后在文本内容上做你想做的事：

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

<script>
    methods: {
        doSth(event) {
            // Let says that you want to add 10 to the "n" number displayed in the div you clicked on :
            event.target.textContent = parseInt(event.target.textContent) + 10;
        }
    }
</script>

【讨论】：

【解决方案2】：

你可以简单地使用

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

methods : {
   doSth(n) {
       console.log(n)
   }
}

【讨论】：