单选和下拉框的选择改变事件

 当单选或者下拉框的值改变时你需要进行操作，那么可以用@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>

 

 

这样就可以进行改变后的操作了！！！