[前端]在特定条件下隐藏表单项|vue
1、我想要实现这样一种效果：下面是一个表单，在【工单类型】为投诉、举报时，事发区域和事发地点两个表单项才会出现，也就是说选择其他工单类型时，这两个表单项都是隐藏的。
2、这是相关代码段，使用的前端框架是Vue。
<d-form labelSuffix=":" :model="dForm10Datas" :rules="dForm10Rules" ref="dForm10Ref" >
<el-row class="d-pl-48 d-mt-10" ref="dGrid6Ref" >
<el-col :span="12" >
<d-form-item label="工单类型" prop="workType" ref="dFormItem45Ref" >
<d-select width="80%" v-model="dForm10Datas.workType" :enumList="dSelect5EnumList" ref="dSelect5Ref" ></d-select>
</d-form-item>
</el-col>
<el-col :span="12" >
<d-form-item label="是否公开" prop="isPublic" ref="dFormItem46Ref" >
<d-radio :border="false" :enumList="dRadio7EnumList" ref="dRadio7Ref" ></d-radio>
</d-form-item>
</el-col>
<el-col :span="22" >
<d-form-item label="诉求标题" prop="appealTitle" ref="dFormItem47Ref" >
<d-input class="DInput50-style" v-model="dForm10Datas.appealTitle" ref="dInput50Ref" ></d-input>
</d-form-item>
</el-col>
<el-col :span="12" >
<d-form-item label="紧急程度" prop="sla" ref="dFormItem48Ref" >
<d-radio :border="false" :enumList="dRadio8EnumList" ref="dRadio8Ref" ></d-radio>
</d-form-item>
</el-col>
<el-col :span="22" >
<d-form-item label="诉求详情" prop="communityDemands" ref="dFormItem49Ref" >
<d-input class="DInput52-style" type="textarea" v-model="dForm10Datas.communityDemands" ref="dInput52Ref" ></d-input>
</d-form-item>
</el-col>
<el-col :span="13" >
<d-form-item label="附件资料" ref="dFormItem50Ref" >
<d-upload btnText="选择文件" ref="dUpload2Ref" ></d-upload>
</d-form-item>
</el-col>
<el-col :span="12" >
<d-form-item label="来电时间" ref="dFormItem51Ref" >
<d-date-picker :showCurDate="true" width="80%" ref="dDatePicker3Ref" ></d-date-picker>
</d-form-item>
</el-col>
<el-col :span="11" >
<d-form-item label="事发区域" ref="dFormItem54Ref" >
<d-input width="80%" ref="dInput57Ref" ></d-input>
</d-form-item>
</el-col>
<el-col :span="22" >
<d-form-item label="事发地点" ref="dFormItem57Ref" >
<d-input placeholder="示例：横琴镇XX路XX号XX室" width="80%" ref="dInput58Ref" ></d-input>
</d-form-item>
</el-col>
<el-col :span="12" >
<d-form-item label="登记人" ref="dFormItem53Ref" >
<d-input width="80%" :readonly="true" v-model="dForm10Datas.regUsr" ref="dInput56Ref" ></d-input>
</d-form-item>
</el-col>
<el-col :span="12" >
<d-form-item label="登记时间" ref="dFormItem52Ref" >
<d-date-picker :showCurDate="true" :readonly="true" ref="dDatePicker4Ref" ></d-date-picker>
</d-form-item>
</el-col>
</el-row>
</d-form>
3、想请教一下解决思路~
template加条件
<template v-if="dForm10Datas.workType === 1">
<el-col :span="11" >
<d-form-item label="事发区域" ref="dFormItem54Ref" >
<d-input width="80%" ref="dInput57Ref" ></d-input>
</d-form-item>
</el-col>
<el-col :span="22" >
<d-form-item label="事发地点" ref="dFormItem57Ref" >
<d-input placeholder="示例：横琴镇XX路XX号XX室" width="80%" ref="dInput58Ref" ></d-input>
</d-form-item>
</el-col>
</template>
<d-form-item label="事发区域" ref="dFormItem54Ref" v-if=“dForm10Datas.workType == ‘投诉’ || dForm10Datas.workType == ‘举报’ ”>
<d-input width="80%" ref="dInput57Ref" ></d-input>
</d-form-item>
<d-form-item label="事发地点" ref="dFormItem57Ref" v-if=“dForm10Datas.workType == ‘投诉’ || dForm10Datas.workType == ‘举报’ ”>
<d-input placeholder="示例：横琴镇XX路XX号XX室" width="80%" ref="dInput58Ref" ></d-input>
</d-form-item>
善用 标签是一个HTML5标签，
用于定义客户端模板。模板是包含可重复性代码的基础结构，这些代码可以在不同上下文中显示或使用。 标签可以存储客户端不渲染的HTML代码，作为组件的模板使用。
至于条件的控制，你这里使用d-select的change事件
<template v-if="条件">
</template >
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/1061129
- 这篇博客也不错, 你可以看下关于VUE踩过的坑，两个数组等于同一个返回的结果集，其中一个数组变了，另外一个数组也跟着变
- 除此之外, 这篇博客: Vue复习(更新中...)中的 !!!! 可以通过全局混入的方式，给东西塞到当前实例对象里面去，想在任何地方用都能用，方便其他人去用，通过自定义属性对当前实例添加了自定义属性 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
- 您还可以看一下 刘建萍老师的Web前端开发经典案例之vue框架开发电商项目百草味案例（一）课程中的 在商品列表部分点击商品添加购物车按钮触发的事件小节, 巩固相关知识点
- 以下回答由chatgpt基于相关博客总结生成:
解决方案:
在Vue中实现在特定条件下隐藏表单项的解决方法可参考以下步骤：
1.在组件中定义需要控制显示或隐藏的表单项。
<template> <form> <label for="order-type">工单类型：</label> <select id="order-type" v-model="orderType"> <option value="">请选择工单类型</option> <option value="complaint">投诉</option> <option value="report">举报</option> <option value="other">其他</option> </select> <br> <div v-if="showAreaAndLocation"> <label for="area">事发区域：</label> <input id="area" type="text"> <br> <label for="locaiton">事发地点：</label> <input id="location" type="text"> <br> </div> </form> </template>2.使用Vue的计算属性computed，控制需要隐藏的表单项是否显示。
<script> export default { data() { return { orderType: '', } }, computed: { showAreaAndLocation() { return this.orderType === 'complaint' || this.orderType === 'report' } } }; </script>在上述代码中，通过计算属性showAreaAndLocation的值控制需要隐藏的表单项是否显示，如果工单类型为投诉或举报，展示事发区域和事发地点两个表单项。 如果工单类型为其他，隐藏这两个表单项。
完整代码如下：
<template> <form> <label for="order-type">工单类型：</label> <select id="order-type" v-model="orderType"> <option value="">请选择工单类型</option> <option value="complaint">投诉</option> <option value="report">举报</option> <option value="other">其他</option> </select> <br> <div v-if="showAreaAndLocation"> <label for="area">事发区域：</label> <input id="area" type="text"> <br> <label for="locaiton">事发地点：</label> <input id="location" type="text"> <br> </div> </form> </template> <script> export default { data() { return { orderType: '', } }, computed: { showAreaAndLocation() { return this.orderType === 'complaint' || this.orderType === 'report' } } }; </script>以上就是在Vue框架中实现在特定条件下隐藏表单项的解决方法，通过计算属性computed控制需要隐藏的表单项是否显示即可。