Vue 实现切换单选按钮，在输入框显示不同的内容。

1.效果展示

位置控制显示

尺寸、符号都受位置的影响，当位置为上时显示尺寸上、符号上，当位置为下时显示尺寸下、符号下。

2.代码实现

// html部分
<a-form-model-item label="尺寸">
 <a-input v-model="form.size" @input="sizeInput" />
</a-form-model-item>
<a-form-model-item label="位置">
 <a-radio-group v-model="form.position" @change="positionChange">
  <a-radio value="1">上</a-radio>
  <a-radio value="2">下</a-radio>
 </a-radio-group>
</a-form-model-item>
<a-form-model-item label="符号">
 <a-radio-group v-model="form.symbol" @change="symbolChange">
  <a-radio-button value="0">Hangzhou</a-radio-button>
  <a-radio-button value="1">Shanghai</a-radio-button>
  <a-radio-button value="2">Beijing</a-radio-button>
  <a-radio-button value="3">Chengdu</a-radio-button>
 </a-radio-group>
</a-form-model-item>

// js部分
// 位置变化 控制 值显示
positionChange() {
 if (this.form.position === '1') {
  this.form.size = this.form.upSize // 控制尺寸显示
  this.form.symbol = this.form.upSymbol // 控制符号显示
 } else {
   this.form.size = this.form.downSize
   this.form.symbol = this.form.downSymbol
 }
},
// 表单变化 控制 值保存
symbolChange() {
 if (this.form.position === '1') {
  this.form.upSymbol = this.form.symbol
 } else {
   this.form.downSymbol = this.form.symbol
 }
},
// 表单变化 控制 值保存
sizeInput() {
 if (this.form.position === '1') {
  this.form.upSize = this.form.size
} else {
  this.form.downSize = this.form.size
 }
},