vue中动态添加div节点
时间: 2023-04-04 20:00:50 浏览: 251
vue 动态添加 HTML元素
可以使用Vue的v-for指令和数组来动态添加div节点,例如:
在Vue实例中定义一个数组:
data: {
divs: []
}
在模板中使用v-for指令遍历数组,并使用v-bind绑定class和style:
<div v-for="(div, index) in divs" :key="index" :class="div.class" :style="div.style"></div>
在方法中使用push方法向数组中添加元素:
methods: {
addDiv() {
this.divs.push({
class: 'new-div',
style: {
backgroundColor: 'red',
width: '100px',
height: '100px'
}
})
}
}
调用addDiv方法即可动态添加div节点。
阅读全文