uniapp中li加个小标签
在uniapp中,可以使用小程序的组件来为li标签添加小标签。例如,在li标签内部添加一个view标签,并设置样式为小标签样式:
<template>
<ul>
<li v-for="(item, index) in list" :key="index">
{{ item }}
<view class="tag">{{ index + 1 }}</view>
</li>
</ul>
</template>
<style>
.tag {
display: inline-block;
background-color: #f60;
color: #fff;
font-size: 12px;
line-height: 1;
padding: 2px 5px;
border-radius: 10px;
margin-left: 5px;
}
</style>
在上述代码中,我们通过v-for指令循环渲染列表,然后在li标签中添加一个view标签,用来显示小标签。我们还给view标签添加了一个tag类样式,用来设置小标签的样式。其中,我们使用了flex布局来使小标签与列表项处于同一行。最后,我们使用了margin-left样式来设置小标签与列表项之间的间距。
原文地址: https://www.cveoy.top/t/topic/vsh 著作权归作者所有。请勿转载和采集!