Vue 实现切换单选按钮,在输入框显示不同的内容。
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
}
},
更多推荐
已为社区贡献10条内容
所有评论(0)