在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样式来设置小标签与列表项之间的间距。

uniapp中li加个小标签

原文地址: https://www.cveoy.top/t/topic/vsh 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录