单选和下拉框的选择改变事件
作者:互联网
当单选或者下拉框的值改变时你需要进行操作,那么可以用@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> 这样就可以进行改变后的操作了!!!标签:false,shanghai,单选,事件,danxuan,radio,下拉框 来源: https://www.cnblogs.com/likai87/p/15551714.html