vue2.0移动端自定义性别选择提示框

原创 黎云锐 教程 前端 1277阅读 27 天前 举报

这篇文章主要是简单的实现了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>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复