vue动态改变HTML的属性值，以elementUI表单必填项和选填切换为例

使用场景

表单控件需要根据条件动态进行必填项验证，如果用v-if来写，有点繁琐，而且会造成很多重复代码。

比如下面的就用了v-if的方式，为了解决属性prop是否有的问题（elementUI）：

<!-- 所有渠道，类型为自然人时非必填，否则必填 -->
        <el-form-item label="代理人单位：" prop="agentCompany" v-if="dialogNewform.agentType == 0">
          <el-input v-model="dialogNewform.agentCompany" auto-complete="off"></el-input>
        </el-form-item>
		<el-form-item label="代理人单位：" v-else>
          <el-input v-model="dialogNewform.agentCompany" auto-complete="off"></el-input>
        </el-form-item>

其实可以通过v-bind实现，之前也可以：

比如下面的条件，该表单项必填：

代理人渠道是15，且代理人类型是1的
渠道是16的，且代理人类型是2的，代理人职务为必填

        <el-form-item label="代理人职务：" :prop="(dialogNewform.orgId == 15 && dialogNewform.agentType === '1' ? 'agentDuties' : '') || (dialogNewform.orgId == 16 && dialogNewform.agentType === '1' ? 'agentDuties' : '') || (dialogNewform.orgId == 16 && dialogNewform.agentType === '2' ? 'agentDuties' : '')">
          <el-input v-model="dialogNewform.agentDuties" auto-complete="off"></el-input>
        </el-form-item>

简单点的是这样：

<!-- 所有渠道，类型为0时非必填，否则必填 -->
        <el-form-item label="代理人单位：" :prop="dialogNewform.agentType == 0 ? '' : 'agentCompany'">
          <el-input v-model="dialogNewform.agentCompany" auto-complete="off"></el-input>
        </el-form-item>

这篇好文章是转载于：学新通技术网