我不但要循环做出来四个方格,还要再方格里写字,怎么实现呢
时间: 2023-12-21 20:12:05 浏览: 29
如果你想在每个方格中写入文字,可以在 `v-for` 循环中加入一个内部的 `text` (或者其他的标签)标签,并在其中插入文字内容。具体的实现可以参考下面的代码示例:
```html
<template>
<view class="container">
<view v-for="(item, index) in items" :key="index" class="square" :style="'background-color: ' + item.color;">
<text class="text">{{ item.text }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: [
{ color: '#f44336', text: '红色方块' },
{ color: '#2196f3', text: '蓝色方块' },
{ color: '#4caf50', text: '绿色方块' },
{ color: '#ffeb3b', text: '黄色方块' }
]
}
}
}
</script>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.square {
width: 100px;
height: 100px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.text {
color: #fff;
font-size: 16px;
}
</style>
```
在上面的代码中,我们在每个方格中加入了一个 `text` 标签,并绑定了文字内容。我们使用 `display: flex;` 属性将方格设置为弹性布局,并使用 `justify-content: center;` 和 `align-items: center;` 属性将文字内容垂直居中和水平居中。我们还使用了 `.text` 类来设置文字的样式,例如颜色和字体大小。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.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)