vue实现点击div新增相同的div
时间: 2023-12-01 20:03:32 浏览: 40
可以通过以下步骤来实现:
1. 在Vue组件中定义一个数组,用于存储已经添加的div。
2. 在模板中使用v-for指令遍历数组,显示已经添加的div。
3. 给点击事件绑定一个方法,在方法中向数组中添加一个新的div。
4. 在模板中使用v-on指令绑定点击事件。
下面是一个简单的示例代码:
```
<template>
<div>
<div v-for="item in items" :key="item" class="box"></div>
<div class="add-btn" @click="addBox">+</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [] // 存储已经添加的div
}
},
methods: {
addBox() {
this.items.push(Math.random()) // 向数组中添加一个新的div
}
}
}
</script>
<style>
.box {
width: 50px;
height: 50px;
background-color: #ccc;
margin: 10px;
display: inline-block;
}
.add-btn {
width: 50px;
height: 50px;
background-color: #f00;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 30px;
border-radius: 50%;
cursor: pointer;
display: inline-block;
}
</style>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)