【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綁定