Vue3 中添加html元素
时间: 2024-05-26 22:04:19 浏览: 6
在 Vue3 中添加 HTML 元素,可以使用模板语法或者直接操作 DOM。
使用模板语法:
```html
<template>
<div>
<button @click="addDiv">Add div</button>
<div v-for="(item, index) in divList" :key="index">{{ item }}</div>
</div>
</template>
<script>
export default {
data() {
return {
divList: [],
};
},
methods: {
addDiv() {
this.divList.push('<div>New div element</div>');
},
},
};
</script>
```
在模板中定义一个按钮,点击按钮触发 `addDiv` 方法,在 `divList` 数组中添加一个 HTML 字符串,然后使用 `v-for` 循环渲染 `divList` 数组中的每个元素。
直接操作 DOM:
```html
<template>
<div>
<button @click="addDiv">Add div</button>
<div ref="container"></div>
</div>
</template>
<script>
export default {
methods: {
addDiv() {
const div = document.createElement('div');
div.textContent = 'New div element';
this.$refs.container.appendChild(div);
},
},
};
</script>
```
在模板中定义一个空的 `<div>` 元素,并使用 `ref` 属性给它取一个名字,在 `addDiv` 方法中使用 `document.createElement` 方法创建一个新的 `<div>` 元素,然后设置它的文本内容,并将它添加到指定的容器元素中。最后,在 Vue 组件中使用 `$refs` 访问 DOM 元素。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)