Uniapp Li 标签添加小标签教程

<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>
<p>在 Uniapp 中，可以使用小程序的组件来为 li 标签添加小标签。例如，在 li 标签内部添加一个 view 标签，并设置样式为小标签样式：</p>
<p>在上述代码中，我们通过 v-for 指令循环渲染列表，然后在 li 标签中添加一个 view 标签，用来显示小标签。我们还给 view 标签添加了一个 tag 类样式，用来设置小标签的样式。其中，我们使用了 flex 布局来使小标签与列表项处于同一行。最后，我们使用了 margin-left 样式来设置小标签与列表项之间的间距。</p>