當單選或者下拉框的值改變時你需要進行操作，那么可以用@change 改變事件來獲取到改變的內容就可以做相應的操作。
這里使用vue + element 來演示一下
// 單選
<el-form :model="form">
<el-form-item label="活動名稱" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活動區域" :label-width="formLabelWidth">
<template>
<el-radio v-model="radio" label="1" @change="dan">單選一</el-radio>
<el-radio v-model="radio" label="2" @change="dan">單選二</el-radio>
</template>
</el-form-item>
<el-form-item label="單選選擇" :label-width="formLabelWidth" v-show="danxuan">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="單選選擇" :label-width="formLabelWidth" v-show="danxuan">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="單選選擇" :label-width="formLabelWidth" v-show="danxuan">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
// 下拉框
<el-form :model="form">
<el-form-item label="活動名稱" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活動區域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="請選擇活動區域" @change="xiala">
<el-option label="上海" value="shanghai">上海</el-option>
<el-option label="北京" value="beijing">北京</el-option>
</el-select>
</el-form-item>
<el-form-item label="下拉框選擇" :label-width="formLabelWidth" v-show="shanghai">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="下拉框選擇" :label-width="formLabelWidth" v-show="shanghai">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="下拉框選擇" :label-width="formLabelWidth" v-show="shanghai">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<script>
new Vue({
el: '#app',
data: function() {
return {
dialogFormVisible: false,
form: {},
formLabelWidth: '120px',
danxuan: false,
radio: "0",
shanghai: false,
};
},
methods: {
sub() {
console.log(this.form)
},
dan(e) {
console.log(e)
this.radio = e;
if (this.radio == "1") {
this.danxuan = true
} else {
this.danxuan = false
}
},
xiala(e) {
if (e == "shanghai") {
this.shanghai = true
} else {
this.shanghai = false
}
}
},
})
</script>
這樣就可以進行改變后的操作了！！！