vue3如何获取当前点击的元素,并往其中添加html元素
时间: 2024-05-09 10:16:57 浏览: 77
可以通过在模板中添加一个@click事件监听器,然后在事件处理程序中访问事件的target属性来获取当前点击的元素。例如:
```html
<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 对象获取当前点击元素的自定义属性,具体代码如下:
```html
<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 获取自定义属性的值。
vue3获取到所有class=’rateGrade‘的对象,并且给当前对象中添加一个span标签
在Vue 3中,要获取所有class属性为'rateGrade'的元素并为其添加一个新的`<span>`标签,你需要使用Vue提供的`$refs`或者自定义事件以及`v-for`循环结合数组方法。假设有一个列表或组件中存在这样的元素,你可以这样做:
```html
<!-- 使用ref -->
<div ref="rateGrades" v-for="(item, index) in rateGrades" :key="index">
<div :class="{ rateGrade: true }" @click="addSpan(index)">
<!-- 父级元素 -->
</div>
</div>
<script>
export default {
data() {
return {
rateGrades: [], // 这里假设你已经有了一个数组,存储需要操作的元素
};
},
methods: {
addSpan(index) {
const elements = this.$refs.rateGrades; // 获取所有class='rateGrade'的元素
for (const el of elements) {
if (!el.querySelector('.new-span')) { // 检查是否已添加
const span = document.createElement('span'); // 创建新的span元素
span.textContent = 'New Span'; // 设置内容
el.appendChild(span); // 添加到元素内部
}
}
},
},
};
</script>
```
这里我们假设`rateGrades`是你需要遍历的元素数组,每个元素都是一个包裹着需要添加`<span>`的div。`addSpan`方法会在点击时查找并添加新的`<span>`。
阅读全文