vue for循环出5个盒子,怎么往其中一个盒子内添加一个对象并且把对象的内容渲染出来展示在盒子内
时间: 2024-05-16 08:14:10 浏览: 9
你可以使用Vue的v-for指令来循环生成5个盒子,然后给每个盒子绑定一个唯一的索引值。当需要往其中一个盒子内添加一个对象时,可以使用索引值来确定要添加的盒子,并修改对应的数据。最后在模板中使用v-if指令来判断该盒子是否需要展示这个对象的内容。
代码示例:
```html
<template>
<div>
<div v-for="(item, index) in boxes" :key="index" class="box">
<h3>Box {{ index + 1 }}</h3>
<div v-if="item.showContent">
<p>{{ item.content }}</p>
</div>
</div>
<button @click="addContent">Add Content to Box 3</button>
</div>
</template>
<script>
export default {
data() {
return {
boxes: [
{ showContent: false, content: '' },
{ showContent: false, content: '' },
{ showContent: false, content: '' },
{ showContent: false, content: '' },
{ showContent: false, content: '' }
]
}
},
methods: {
addContent() {
this.boxes[2].showContent = true
this.boxes[2].content = 'Hello World!'
}
}
}
</script>
```
这个示例中,使用v-for指令循环生成了5个盒子,并绑定了一个boxes数组。其中每个盒子都有一个布尔类型的showContent属性和一个字符串类型的content属性。当showContent为true时,会展示content的内容。在模板中使用v-if指令来判断showContent是否为true,来决定是否展示content的内容。在addContent方法中,可以通过修改boxes数组的内容来控制第3个盒子展示特定的内容。
相关推荐
![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)