小程序 之radio按钮选中事件

要求：
默认不选中，当选中出口时，显示港口类型,其他情况不显示港口类型
初始效果：

1.xml部分代码如下

<view class="weui-flex">
	<view class="weui-flex__item">
		<view class="placeholder">
			<view class="wehx-custom_title">进出口类型</view>
			<view class="wehx-custom_content">
				<radio-group class="radio-group" bindchange="radioChange" style="display:flex;">
					<radio class="weui-flex__item radio" wx:for-items="{{radios}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}" color="#2ea7e0">
						<text>{{item.value}}</text>
					</radio>
				</radio-group>
			</view>
		</view>
	</view>
</view>
<view class="weui-flex" wx:if="{{aa==true}}">
	<view class="weui-flex__item">
		<view class="placeholder">
			<view class="wehx-custom_title">港口选择</view>
			<view class="wehx-custom_content">
				<radio-group class="radio-group" bindchange="portChange" style="display:flex;">
					<radio class="weui-flex__item radio" wx:for-items="{{ports}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}" color="#2ea7e0">
						<text>{{item.value}}</text>
					</radio>
				</radio-group>
			</view>
		</view>
	</view>
</view>

2. js部分代码如下：

data: {
   radios: [
     { name: '进口', value: '进口' },
     { name: '出口', value: '出口', checked: '' },
   ],
   ports: [
     { name: '外港', value: '外港' },
     { name: '洋山', value: '洋山',},
   ],
   aa:false//默认不显示 港口
 },
 // radio事件
 radioChange: function (e) {
   console.log('radio发生change事件，携带value值为：', e.detail.value)
   if(e.detail.value== '出口'){
     this.setData({
       aa:true
     })
   }else{
     this.setData({
       aa:false
     })
   }
 },
 portChange:function(e){
   console.log('radio发生change事件，携带value值为：', e.detail.value)
 },

最终效果如图：