Join.vue

<template>
{{member}}
  <el-form ref="form" label-width="120px" style="width:600px;">
    <el-form :inline="true" label-width="120px" class="demo-form-inline">      
        <el-form-item label="아이디">
            <el-input v-model="member.userid"></el-input>
        </el-form-item>

        <el-form-item>
           <el-button type="primary">중복확인</el-button>
        </el-form-item>
    </el-form>

    <el-form-item label="암호" prop="pass">
      <el-input v-model="member.userpw" type="password" autocomplete="off" />
    </el-form-item>

    <el-form-item label="암호확인" prop="pass">
      <el-input v-model="member.userpw1" type="password" autocomplete="off" />
    </el-form-item>

    <el-form-item label="Age" prop="age">
      <el-input type="number" v-model="member.age" />
    </el-form-item>

    <el-form-item label="생년월일">
      <el-col>
        <el-date-picker v-model="member.date" type="date" style="width: 100%" />
      </el-col>
    </el-form-item>

    <el-form-item label="이메일">
        <el-col :span="11">
            <el-form-item >
            <el-input v-model="member.email1"></el-input>
            </el-form-item>
        </el-col>
        <el-col class="line" :span="2">@</el-col>

        <el-col :span="11">
            <el-select v-model="member.useremail1" size="mini" placeholder="선택">
                <el-option v-for="tmp in emailoption" :key="tmp"
                    :label="tmp" :value="tmp"></el-option>
            </el-select>        </el-col>
    </el-form-item>

    <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
        <el-form-item label="관심분야" label-width="120px">
            <el-checkbox-group v-model="member.type">
                <el-checkbox v-for="tmp in typeoption" :key="tmp"
                    :label="tmp"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
    </el-form>

    <el-form-item label="성별">
        <el-radio-group v-model="member.sex">
            <el-radio label="남자"></el-radio>
            <el-radio label="여자"></el-radio>
        </el-radio-group>
    </el-form-item>

    <el-form-item label="약관내용">
        <el-input v-model="member.textarea" type="textarea"></el-input>
    </el-form-item>

    <el-form-item>
        <el-checkbox v-model="member.chk" label="약관동의"></el-checkbox>
    </el-form-item>

    <el-form-item>
        <el-button type="primary" @click="handleJoin">회원가입</el-button>
        <el-button>홈</el-button>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
    data() {
        return {
            member: {
                userid: '',
                userpw: '',
                userpw1: '',
                age: '',
                date: '',
                useremail1: '',
                useremail2: '',
                type: [],
                sex: '',
                textarea: '',
                chk: false,
            },
            emailoption : ['naver.com','daum.net', 'gmail.com'],
            typeoption : ['HTML', 'CSS', 'JAVASCRIPT', 'VUE', 'DB'],

        }
    },

    methods: {
    },

}
</script>