单选按钮radio嵌套radio(多层radio)

当点击出口按钮时，显示另外一组单选按钮(111 222)；点击进口按钮时，另外一组单选按钮(111 222)隐藏
最终效果如下：

1. JS写法

html部分代码如下：

<div class="group_rows">
	<div
      class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padleft padingtop"
    >
      <span class="sidetitle">信息发布</span>
      <!-- 单选按钮的文字和input组合 -->
      <div style="display: inline-block;">
        <input
          type="radio"
          id="tradein"
          value="radioin"
          v-model="pickedradio"
          v-on:click="onClickhide"
        />
        <label for="tradein" class="chexwords" v-on:click="onClickhide">进口</label>
      </div>
      <!-- 单选按钮的文字和input组合 -->
      <div style="padding-left:40px;display: inline-block;">
        <input
          type="radio"
          id="tradeout"
          value="radioout"
          v-model="pickedradio"
          v-on:click="onClickshow"
        />
        <label for="tradeout" class="chexwords" v-on:click="onClickshow">出口</label>
      </div>
      <div style="display:none" class="disradioout">
        <div style="padding-left:40px;display: inline-block;">
          <input
            type="radio"
            id="pickedout"
            value="radios1"
            v-model="pickeds"
          />
          <label for="pickedout" class="chexwords">外港</label>
        </div>
        <div style="padding-left:40px;display: inline-block;">
          <input
            type="radio"
            id="pickedin"
            value="radios2"
            v-model="pickeds"
          />
          <label for="pickedin" class="chexwords">洋山</label>
        </div>
      </div>
    </div>
  </div>

Js部分代码如下：

data:{
	pickedradio:"radioin",//默认选中进口
     pickeds:"radios1",//默认选中111
},
methods:{
	//点击出口按钮时显示  111  222
    onClickshow:function(){
      $(".disradioout").show();
    },
    //点击进口按钮时隐藏  111  222
    onClickhide:function(){
      $(".disradioout").hide();
    },
}

2.Vue写法：

<div
class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padleft padingtop"
 >
   <span class="sidetitle">信息发布</span>
   <!-- 单选按钮的文字和input组合 -->
   <div style="display: inline-block;">
     <input
       type="radio"
       id="tradein"
       value="radioin"
       v-model="pickedradio"
     />
     <label for="tradein" class="chexwords">进口</label>
   </div>
   <!-- 单选按钮的文字和input组合 -->
   <div style="padding-left:40px;display: inline-block;">
     <input
       type="radio"
       id="tradeout"
       value="radioout"
       v-model="pickedradio"
     />
     <label for="tradeout" class="chexwords">出口</label>
   </div>
   <div v-show="pickedradio=='radioout'" class="disradioout">
     <div style="padding-left:40px;display: inline-block;">
       <input
         type="radio"
         id="pickedout"
         value="radios1"
         v-model="pickeds"
       />
       <label for="pickedout" class="chexwords">外港</label>
     </div>
     <div style="padding-left:40px;display: inline-block;">
       <input
         type="radio"
         id="pickedin"
         value="radios2"
         v-model="pickeds"
       />
       <label for="pickedin" class="chexwords">洋山</label>
     </div>
   </div>
   
 </div>

用v-show="" 判断某元素是否显示

js部分代码如下：

data：{
	pickedradio:"radioin",//默认选中进口
    pickeds:"radios1",//默认选中111
}