这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能，很简单但是经常用到，于是写了一个小小的demo，记录下来。

效果图：

图片.png

实现代码：

<template>
    <div class="app">
        
        <div class="boy">
        <input type="radio" name="radios" value="1" v-model="param"><label>男</label>
        </div>
        
        <div class="girl">
        <input type="radio" name="radios" value="2" v-model="param"><label>女</label>
        </div>
        
    </div></template><script>
    export default {
        data() {            return {                param: '1' //设置默认值为1，即设置第一个单选框为选中状态

            }
        },        methods: {

        }
    };</script><style>
    .app{    height:60px;    background: #fff;   
    border: 1px solid  #f1ebeb;
    }    .boy{    height:30px;    background: fff;    border-bottom: 1px solid  #f1ebeb;
    }    .boy input{        text-align: center;
    }    .boy label{        text-align: center;
    }    
    
    .girl{        height:30px;    background: fff;
    }</style>

原文作者：祈澈姑娘

作者：祈澈菇凉
链接：https://www.jianshu.com/p/f998f6f580c