vue 熟悉v-model，双向绑定 实现三级联动

<template>

  <div class="mt">

         <div class="fm" v-show="index==1">  

     <h3><span>超企用户注册</span> <i class="el-icon-close" @click="index=0"></i></h3>

     <label>用户名:</label> <input type="text" v-model="name"> <br>

     <label>密码:</label> <input type="password" v-model="pwd"> <br>

     <label>再次确认密码</label> <input type="password" v-model="paw"> <br>

     <label>昵称:</label> <input type="text" v-model="str"> <br>

     <label>性别:</label> <input type="radio" value="男" v-model="sex">男 <input type="radio" value="女" v-model="sex"> 女 <br>

     <label>所属城市:</label>  <select v-model="s1" @change="a()">

         <option v-for="(val,i) in city" :key="i" :value="i">{{val.name}}</option>

     </select>

<select v-model="s2" @change="b()">

    <option v-for="(val,i) in city[s1].city" :key="i" :value="i">{{val.name}}</option>

</select>

     <select v-model="s3">

         <option v-for="(val,i) in city[s1].city[s2].area" :key="i" :value="i">{{val}}</option>

         

     </select> <br>

     <label>兴趣爱好:</label> <input type="checkbox" v-model="arr" value="爬山">爬山

         <input type="checkbox" v-model="arr" value="旅游">旅游

         <input type="checkbox" v-model="arr" value="看书">看书

         <input type="checkbox" v-model="arr" value="看星星">看星星  <br>

         <button @click="btn()">提交</button>

         

   </div>

  

    </div>

</template>

<style scoped>

.mt{

  position: fixed;

  bottom: 0;

  top: 0;

  left: 0;

  right: 0;

}

.fm{

  

  position: absolute;

  width:30%;

  height:90%;

  background:#fff;

  left:600px;

  top:10px;

  line-height:60px;

  border: 1px solid rgb(94, 45, 45);

     box-shadow:10px 10px 10px rgb(173, 157, 157),

                       0px 0px  10px  #ccc,

                       10px 0px  5px  rgb(161, 152, 152);

                       

}

.fm h3{

  width:90%;

  margin: auto;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.fm h3 span{

  width:90%;

}

</style>

<script>

import city from '../assets/city'

export default {

    data(){

        return{

            city,

            name:'',

            pwd:'',

            paw:'',

            sex:"男",

            arr:[],

            s1:0,

            s2:0,

            s3:0,

            str:'',

            index:1

        }

    },

   methods:{

       a(){

           this.s2=0;

           this.s3=0;

       },

       b(){

           this.s3=0;

       },

       btn(){

           if(this.pwd==this.paw){

                console.log(this.name);

               console.log(this.pwd);

               console.log(this.paw);

               console.log(this.str);

               console.log(this.sex);

               console.log('省'+city[this.s1].name);

               console.log('市'+city[this.s1].city[this.s2].name);

               console.log('区'+city[this.s1].city[this.s2].area[this.s3]);

               console.log(this.arr)

               this.$message('获取信息成功')

           }else if(this.pwd!=""||this.pwd!=null || this.paw!=''||this.paw!=null){

               this.$message('密码不一致')

           }else{

               this.$message("密码不能为空")

           }

       }

   }

}

</script>