vue中input动态改变background-color等值（element、iview为例）

先说场景，一个纯动态渲染的from表单，现在接到一个需求需要根据后台返回的值中的一个参数来进行改变背景色。现在根据vue以及css属性选择器来进行实现功能

上代码

iview

template

    <Form ref="formValidate" :model="formValidate" :label-width="80" inline>
      <FormItem
        :label="item.name"
        prop="name"
        v-for="(item, index) in newForm"
        :key="item.key"
      >
        <Input
          v-model="item.defaultValue"
          placeholder="请输入内容"
          :title="item.inputRule"
          :errorColor="item.confidence < 0.95"
        ></Input>
      </FormItem>
    </Form>

css

.ivu-input-wrapper[errorColor='true'] .ivu-input {
  background-color: #e6a23c;
}

element

template

            <el-form-item
              :label="item.label"
              v-for="(item,index) in allData.headerList"
              :key="item.key"
              :show-overflow-tooltip="true"
            >
              <el-input
                v-model="item.value"
                :SuccessColor="item.confidence>=0.95"
                :errorColor="item.confidence<0.95"
                style="width:170px"
              ></el-input>
            </el-form-item>

css

.el-input__inner[errorColor='true'] {
  background-color: #e6a23c;
}

实现原理

在动态渲染form表单时，将需要根据判断的值渲染进input里面，然后再在css里写属性选择器，选择到具体的某一类型的input设置对应的属性。
这里需要注意的一点就是element和iview的区别element将属性直接渲染到input，而iview将属性渲染到上一级的div里面