vue append
时间: 2023-08-25 09:11:23 浏览: 70
在Vue.js中,可以使用`v-if`和`v-for`指令来动态地向DOM元素添加内容。然而,如果你想在已有的DOM元素后面追加新的内容,可以使用Vue的内置方法`$el.appendChild()`。
下面是一个示例,展示了如何在Vue实例的DOM元素后面追加一个新的元素:
```html
<template>
<div ref="container">
<!-- 已有的内容 -->
<p>已有的内容</p>
</div>
</template>
<script>
export default {
mounted() {
// 获取DOM元素的引用
const container = this.$refs.container;
// 创建新的DOM元素
const newElement = document.createElement('p');
newElement.textContent = '新的内容';
// 将新元素追加到已有内容后面
container.appendChild(newElement);
}
};
</script>
```
在上述示例中,我们使用了`ref`属性来获取到Vue实例中的`<div>`元素,并将其赋值给`container`变量。然后,我们使用`document.createElement()`方法创建一个新的`<p>`元素,并设置其文本内容为"新的内容"。最后,我们使用`appendChild()`方法将新元素追加到容器元素的末尾。
请注意,`mounted()`生命周期钩子函数用于确保在Vue实例挂载后执行DOM操作。