vue中,怎么用css把item.name渲染到img item.url内 <div v-for="item in state.list" :key="item" class="item" @click="add(item.link)" > <img :src="item.url" alt=""> <div><b>丨 {{ item.name }}</b></div> </div>
时间: 2024-03-24 07:41:17 浏览: 13
你可以使用CSS的伪元素 `::after` 或 `::before` 来实现将 `item.name` 渲染到 `img` 的 `item.url` 内。具体实现如下:
```css
.item {
position: relative;
}
.item img {
display: block;
}
.item::after {
content: attr(data-name); /* 将 item.name 的值作为 content */
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 5px 0;
font-size: 14px;
}
/* 将 item.name 的值通过 data-* 属性传递 */
<div v-for="item in state.list" :key="item" class="item" @click="add(item.link)" :data-name="item.name">
<img :src="item.url" alt="">
</div>
```
上述代码中,我们将 `item.name` 的值传递给 `item` 元素的 `data-name` 属性,并使用 CSS 将其作为 `::after` 伪元素的 `content` 属性的值,通过绝对定位将其渲染到 `img` 的上方。需要注意的是,为了使 `::after` 元素能够覆盖在 `img` 元素上方,需要将 `.item` 元素设置为相对定位。