vue2.0移动端自定义性别选择提示框
这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来。
效果图:
实现代码:
<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/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。