vue3如何获取当前点击的元素，并往其中添加html元素

可以通过在模板中添加一个@click事件监听器，然后在事件处理程序中访问事件的target属性来获取当前点击的元素。例如：

<template>
  <div @click="addHtml">
    <p>Click me!</p>
  </div>
</template>

<script>
export default {
  methods: {
    addHtml(event) {
      const target = event.target
      const newElement = document.createElement('span')
      newElement.innerHTML = 'Hello, world!'
      target.appendChild(newElement)
    }
  }
}
</script>

这将在当前点击的`<div>`元素中添加一个新的`<span>`元素。

相关问题

vue 获取当前点击元素自定义属性

可以通过 $event 对象获取当前点击元素的自定义属性，具体代码如下：

<template>
  <div>
    <button @click="handleClick" data-id="123">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      const id = event.target.dataset.id;
      console.log(id); // 输出 123
    },
  },
};
</script>

在上面的代码中，我们给 button 元素添加了一个自定义属性 data-id，并且在点击事件的回调函数中通过 $event.target 获取当前点击的元素，并通过 dataset.id 获取自定义属性的值。

vue 获取当前点击对象下一个元素并赋值

可以在Vue组件的data选项中定义一个变量，并在点击事件处理函数中给这个变量赋值。具体代码如下：

<template>
  <div>
    <h1>Vue组件</h1>
    <p>这是一个Vue组件的内容</p>
    <button @click="handleClick">获取下一个元素并赋值</button>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nextElement: null
    }
  },
  methods: {
    handleClick(event) {
      this.nextElement = event.target.nextElementSibling.outerHTML
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为`nextElement`的变量，并在点击事件处理函数`handleClick`中给这个变量赋值，赋值为当前点击对象的下一个元素（`ul`元素）的HTML代码。这个变量可以在Vue组件的模板中直接引用。例如，我们可以在模板中添加一个`<pre>`元素，用来展示`nextElement`变量的值：

<template>
  <div>
    <h1>Vue组件</h1>
    <p>这是一个Vue组件的内容</p>
    <button @click="handleClick">获取下一个元素并赋值</button>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
    <pre>{{ nextElement }}</pre>
  </div>
</template>

在模板中，我们使用Vue的双花括号语法（`{{ }}`）将`nextElement`变量的值渲染到`<pre>`元素中。