vue 状态判断

<i class="dot-class" style="background-color: red"></i>

绿圆点：

<i class="dot-class" style="background-color: #67c23a"></i>

整体

 <span v-if="!props.row.rtuConnected"
        style="color: red; display: flex; flex-wrap: nowrap"
 >
    <i class="dot-class" style="background-color: red"></i>
    <span> 断开</span>
 </span>
  <span  v-else
         style="color: #67c23a; display: flex; flex-wrap: nowrap"
  >
      <i class="dot-class" style="background-color: #67c23a"></i>
      <span> 连接 </span>
 </span>

样式

.dot-class {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 7px;
  margin-right: 5px;
  display: block;
}

呈现