多个显示隐藏，需要定多个变量，

需求

image.png

点击公开，一下都显示推送公告，推送公告一下不显示，点击非公开一下都不显示
点击公开并且点击推送公告为是的话，以后都显示，点否的话以后都不显示
2.在data里面定义2个变量

 announceTypeShow:true,//目标用户默认为显示
  isPopUpShow:true,//推送公告默认为显示

3.点击的结构必须循环,所以在data里面定义一下

 radioPopUpList: [
                {
                  label: '是',
                  value: 0
                },{
                  label: '否',
                  value: 1
                }],
radioList: [ {
                  label: '公开',
                 value: 2
                  }, {
            label: '非公开',
            value: 1
            }],

4.在结构里面循环

<el-form-item label="目标用户" prop="announceType" >
            <el-radio-group v-model="ruleForm.announceType">
              <el-radio
                      @change="announceTypeShowFn"
                      v-for="item in radioList"
                      :key="item.value"
                      :label="item.value"
              >
                {{item.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="推送公告" v-if="isPopUpShow">
          <el-radio-group v-model="ruleForm.isPopUp" >
            <el-radio
                    @change="isPopUpShowFn"
                    v-for="item in radioPopUpList"
                    :label="item.value"
                    :key="item.value"
            >
              {{item.label}}
            </el-radio>
          </el-radio-group>
        </el-form-item>

5.在点击事件里面判断

 //目标用户--显示隐藏
          announceTypeShowFn(val){
            if(val==2){//公开
                this.isPopUpShow=true
                this.announceTypeShow=false
            }else{
                this.isPopUpShow=false
                this.announceTypeShow=true
            }
          },

          //推送公告--显示隐藏
          isPopUpShowFn(val){
            if(val==0){//是
              this.isPopUpShow=true;
              this.announceTypeShow=true
            }else{
              this.isPopUpShow=true;
              this.announceTypeShow=false
            }
          }

6.在结构里面v-if显示

<el-form-item label="目标用户" prop="announceType" >
            <el-radio-group v-model="ruleForm.announceType">
              <el-radio
                      @change="announceTypeShowFn"
                      v-for="item in radioList"
                      :key="item.value"
                      :label="item.value"
              >
                {{item.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="推送公告" v-if="isPopUpShow">
          <el-radio-group v-model="ruleForm.isPopUp" >
            <el-radio
                    @change="isPopUpShowFn"
                    v-for="item in radioPopUpList"
                    :label="item.value"
                    :key="item.value"
            >
              {{item.label}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="指定应用" prop="announceTargetAppList" v-if="isPopUpShow&&announceTypeShow">
          <el-checkbox-group v-model="ruleForm.announceTargetAppList">
            <el-checkbox
                    v-for="(item,index) in announceAppList"
                    :key="item.targetAppCode+index"
                    :label="item"
            >
              {{item.targetAppName}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="强制查看" v-if="isPopUpShow&&announceTypeShow">
          <el-radio-group v-model="ruleForm.checkChoice">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设置时间" prop="remindFormSetDate" v-if="isPopUpShow&&announceTypeShow">
          <el-date-picker
                  ref="datetimerange"
                  v-model="formSetDate"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="MM-dd HH:mm"
                  :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>