<template>

    <!-- 需求:使用  <el-radio>  关于性别单选  前端显示中文，传值为Number  -->

    <div class="demo">

        <!-- 新增部分 -->

        <el-radio-group v-model="newSex" @change="openNewRadio">

            <el-radio label="0">男</el-radio>

            <el-radio label="1">女</el-radio>

        </el-radio-group>

        <!-- 修改部分 -->

        <el-radio-group v-model="editSex" @change="openEditRadio">

            <el-radio :label="0">男</el-radio>       <!-- 这一块与新增部分的区别在于   label   :label -->

            <el-radio :label="1">女</el-radio>

        </el-radio-group>

    </div>

</template>

<script>

    export default {

        name: 'demo',

        data() {

            return {

                newSex: '',

                editSex: '',

            }

        },

        created() {

          this.editSex = 1;   // 修改部分后台返回的值,需要将后台的值回显在前端页面

        },

        methods: {

            openNewRadio(v) {

                console.log(v)  // 打印为 0 或 1

            },

            openEditRadio(v) {

                console.log(v)  // 打印为 0 或 1

            }

        }

    }

</script>

<style scoped>

</style>