element-ui + 回顯格式為中文 傳值格式為對應value

<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>