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

最新推荐文章于 2024-07-21 00:28:55 发布

前端三评

最新推荐文章于 2024-07-21 00:28:55 发布

阅读量1.3k

点赞数

分类专栏： Vuejs 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/imqdcn/article/details/129362326

版权

Vuejs 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

使用场景

表单控件需要根据条件动态进行必填项验证，如果用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>