vue中 动态改变CSS样式

需求：我想要动态改变css样式。

我当前的应用场景：如果我用绝对定位给每个标签添加一个‘*号’，但是每个标签所需‘*号’的位置需要不一样，我希望写一个css样式，来迎合不同的尺寸。不用频繁给每个标签单独写一个样式。

我现在用iview组件，因为想要去动态改变几个input框是否为必填项，需要动态改变前边的必填提示‘*号’的显示和隐藏。但是iview自带的表单校验 request：true 并不能在第一次赋值之后再次动态更改，索性我就直接手动动态给他添加*号，控制起显示隐藏。

在标签上添加 :style="{'--left':'42px'}" 

:style="{'--left':'42px'}" 

 　　　　　　　　 <FormItem label="产品线" prop="productLine" :style="{'--left':'42px'}" :class="current>=1&&transferType!=2?'requiredStar':''">
                  <Select v-model="formData.productLine">
                    <Option v-for="item in productLineList" :key="item" :value="item">{{ item }}</Option>
                  </Select>
                </FormItem>


                <FormItem label="产品线" prop="productLine" :style="{'--left':'56px'}" :class="current>=1&&transferType!=2?'requiredStar':''">
                  <Select v-model="formData.productLine">
                    <Option v-for="item in productLineList" :key="item" :value="item">{{ item }}</Option>
                  </Select>
                </FormItem>

css样式中，通过 left: var(--left);  的方法来获取传进来的值。

//审批字段样式
.requiredStar::before {
  content: "*";
  font-size: 12px;
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute; // 相对于父元素进行绝对定位
  left: var(--left);
  top: 10px;
  text-align: center;
  font-weight: bolder;
  line-height: 1;
  font-family: SimSun;
  color: #ed4014;
}

到这里也就算了完事了，我是因为不同标签需要不同的距离才这样写的，如果后期想动态变化，可以在data中写一个变量，来动态的给style里面的属性赋值。