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

简介: 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>
相关文章
|
2月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
119 5
|
5月前
|
小程序
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
74 0
|
5月前
|
JavaScript
vue 自定义单选样式 radio
vue 自定义单选样式 radio
55 0
|
JavaScript
41Vue - 表单控件绑定(文本)
41Vue - 表单控件绑定(文本)
46 0
42Vue - 表单控件绑定(多行文本)
42Vue - 表单控件绑定(多行文本)
55 0
|
JavaScript
vue+elementUI 实现设置还款日字母弹窗组件
vue+elementUI 实现设置还款日字母弹窗组件
44 0
|
JavaScript 前端开发 UED
Vue中如何进行表单自动完成与下拉选择器
Vue中如何进行表单自动完成与下拉选择器
|
JavaScript
vue动态点击添加样式
v-for循环的多个input框点击添加样式
|
JavaScript Android开发 iOS开发
Vue项目 移动端禁止页面放大缩小
Vue项目 移动端禁止页面放大缩小
603 0
|
JavaScript 定位技术
Vue项目使用天地图标注中点击跳转到其他vue页面
Vue项目使用天地图标注中点击跳转到其他vue页面
下一篇
DataWorks