a-tag

ation_work

已于 2023-06-02 10:42:48 修改

阅读量523

点赞数

分类专栏： vantd随笔文章标签： javascript

于 2023-05-30 17:33:12 首次发布

本文链接：https://blog.youkuaiyun.com/ation_work/article/details/130953451

版权

vantd随笔专栏收录该内容

10 篇文章

订阅专栏

该代码段展示了如何使用Vue的v-if指令根据文本状态显示不同颜色的标签。当文本等于1时，显示绿色的解锁标记；否则，显示红色的锁定标记。CSS类定义了不同状态点的样式，包括未审核（红色）、审核中（橙色）和已审核（绿色）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span v-if="text === 1"
              ><a-tag style="color: #50c182; background: #eafbe9; border: 0px">
                <span class="pointSpanYSH" />
                解锁
              </a-tag></span>
<span v-else
              ><a-tag style="color: red; background: #ffe2e2; border: 0px">
                <span class="pointSpanWSH" />
                锁定
              </a-tag></span>

.pointSpanWSH {
  width: 7px;
  height: 7px;
  border-radius: 100%;
  /*background: #fa8c16;*/
  margin-right: 3px;
  margin-bottom: 1px;
  line-height: -3px;
  display: inline-block;
  background: red;
}
//审核中点样式
.pointSpanSHZ {
  width: 7px;
  height: 7px;
  border-radius: 100%;
  /*background: #fa8c16;*/
  margin-right: 3px;
  margin-bottom: 1px;
  line-height: -3px;
  display: inline-block;
  background: orange;
}
//已审核点样式
.pointSpanYSH {
  width: 7px;
  height: 7px;
  border-radius: 100%;
  /*background: #fa8c16;*/
  margin-right: 3px;
  margin-bottom: 1px;
  line-height: -3px;
  display: inline-block;
  background: green;
}