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

这篇文章主要是简单的实现了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/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

不用Visual Studio,5分钟轻松实现一张报表

常规的报表设计,如RDLC、水晶报表等,需要安装Visual Studio,通过VS提供的报表设计界面来设计报表,通过VS设计报表对.NET开发者而言非常方便,...

3015
来自专栏极乐技术社区

【微信小程序】从入门到放弃

前言 关于微信小程序是什么,能做什么的问题,草民在此不在罗列了,随着小程序的天天刷屏,想必您也是来吃一些干货,本篇博文和大家走进微信小程序的从入门到放弃~ 微信...

3827
来自专栏BestSDK

最全爬虫攻略:微博、APP、公众号一个不能少!

静态网页爬虫 这可以算是最古老的一类爬虫了,第一代搜索引擎走的就是这条技术路线。互联网的开放性决定了,所有我们能够浏览到的HTML网页的内容,都可以被爬虫抓取到...

7236
来自专栏视频咖

腾讯视频云 LiteAVSDK 升级到 5.2.5541

4.9 版本开始,短视频licence开始支持自动续期,如果有使用短视频功能申请过licence,请关注:

5102
来自专栏李成熙heyli

腾讯新闻React同构直出优化实践

按照经验来说,直出,能够减少20% - 50%不等的首屏时间,因此尽管增加一定维护成本,前端们还是前赴后继地在搞直出。

6495
来自专栏phodal

分享下 Backbone、Vue、Angular、React 在项目上的使用经验

上周,知乎上有几篇关于 Angular 和 Vue 对比的文章。本来想着的是,这些文章倒是可以指导下新手,作一些技术选型。可遗憾的是,开始的文章失去了一些偏颇,...

3706
来自专栏Android 开发者

Android 支持库 v26 有哪些变化?

1873
来自专栏EAWorld

为什么使用React作为云平台的前端框架(PPT)

大家好,很高兴可以和大家分享“为什么使用React作为我们的前端框架”。 首先,我们来看一下普元云的总体架构图。 ? 从图中可以看到,在我们普元云平台中,我们最...

4194
来自专栏葡萄城控件技术团队

MultiRow中文版技术白皮书

引言 Microsoft .NET是一项比较成熟的技术开发框架,很多的商业应用都是基于.NET开发的,在这些商业应用中,作为数据展示和录入的表格控件,是不可或缺...

2095
来自专栏KK的小酒馆

几个作品

3.拥有置于前台的服务,实现Notification的播放、暂停按钮与其他界面同步。

973

扫码关注云+社区

领取腾讯云代金券