【vue】elementui中通过radio单选框点选实现某个元素的的隐藏与显示

开发中突然出现一个逻辑，根据单选框的点击，显示与隐藏某个元素

学习的时候可以直接在data里定义参数来用v-show实现，但是现在不能用自定义的参数了，要用单选框内的参数

单选框设置如下

export default{
   data(){
         return{
            unitOrganization:[
            {label:"持证机构",value:1},
            {label:"合作机构",value:0},
        ],
     }
   }
}

 

 

 页面html内容如下

<el-form-item label="你单位为:">
  <el-radio-group v-model="detaProducadd.nature">
      <el-radio   v-for="item in unitOrganization" :label="item.label"  :key="item.value">{{item.label}}</el-radio>
   </el-radio-group>
</el-form-item>

 

 

 

页面要使用单选控制隐藏与显示的内容

<el-form-item label="持证机构">
   <el-input size="mini" v-model="detaProducadd.holderIns"></el-input>
</el-form-item>
<el-form-item label="合作机构">
   <el-input size="mini" v-model="detaProducadd.coopIns"></el-input>
</el-form-item>

 

一开始设想的是使用el-radio中的value通过v-show来控制内容的显示与隐藏，但是后面发现接参的变量nature只能获取label值，所以我们转变思路用label来控制

代码如下：

<el-form-item label="持证机构" v-show="detaProducadd.nature==='合作机构'">
    <el-input size="mini" v-model="detaProducadd.holderIns"></el-input>
</el-form-item>
<el-form-item label="合作机构" v-show="detaProducadd.nature==='持证机构'">
    <el-input size="mini" v-model="detaProducadd.coopIns"></el-input>
</el-form-item>

 

 这个时候就可以根据radio的点选内容来控制元素的显示与隐藏了，v-show和v-if都可以，前者懒加载，占用内存，通过display来控制元素的隐藏与显示，后者是直接创建与释放内存

注1：其中的nature是自由命名的接收参数，使用v-model绑定