<template>

    <!-- 需求:使用  <el-select> +  <el-option> 关于下拉选择  前端显示中文，传值为对应格式value -->

    <div class="demo">

        <!-- 新增部分 -->

        <el-select placeholder="请选择系统" v-model="newOption" @change="newOpenOption">

            <el-option v-for="item in optionData" :label="item.name" :key="item.value" :value="item.value"></el-option>    <!--  重要 value 里面赋值很重要，如果这里赋值成 item.name 那么打印出来就是name的值，传给后台的值也是name,所以要搞清楚后台需要什么类型的值 -->

        </el-select>

        <!-- 修改部分 -->

        <el-select placeholder="请选择系统" v-model="editOption" @change="editOpenOption">

            <el-option v-for="item in optionData" :label="item.name" :key="item.value" :value="item.value"></el-option>    <!--  重要 value 里面赋值很重要，如果这里赋值成 item.name 那么打印出来就是name的值，传给后台的值也是name,所以要搞清楚后台需要什么类型的值 -->

        </el-select>

    </div>

</template>

<script>

    export default {

        name: 'demo',

        data() {

            return {

                newOption:'',

                editOption:'',

                optionData: [{

                    name: '系统',

                    value: "sys"

                }, {

                    name: '前端',

                    value: "web"

                }, {

                    name: '安卓',

                    value: "android"

                }, {

                    name: '苹果',

                    value: "ios"

                }]

            }

        },

        created() {

           this.editOption = 'ios' // 修改部分后台返回的值,需要将后台的值回显在前端页面   后台必须返回这种格式！！！

        },

        methods: {

             newOpenOption(v) {

                console.log(v)   // 这里打印出来的值跟 value里面绑定的相关， 我这里value绑定的是item.value,所以打印出来的是 sys或web

             },

             editOpenOption(v) {

                 console.log(v)

             }

        }

    }

</script>

<style scoped>

</style>