专栏首页编程微刊vue2.0移动端自定义性别选择提示框

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 条评论
登录 后参与评论

相关文章

  • CSS写一个缺角的div

    今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div

    王小婷
  • jQuery实现点击图标div循环放大缩小功能

    很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小...

    王小婷
  • js通过input框输入属性和值,改变div的属性

    js实现在input框里面输入属性和值,页面的 div的属性根据输入的属性和值进行变化。

    王小婷
  • 【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

    这个样式相信大家早已不陌生了,有关这个样式的实现估计很多人不太清楚,下面让我带大家来学习一下这个样式的实现~

    Angel_Kitty
  • css中div垂直居中的方法。

    多谢@alexxxcs1提供的另一种方式(不晓得这样能否@到^_^),嘛其实网上实现居中的方式确实很多,互相探讨加深印象。

    前端博客 : alili.tech
  • 前端-part3-基础css样式

    少年包青菜
  • css display table-cell

    display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

    bear_fish
  • css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题。很有必要掌握以备不时之需:

    xing.org1^
  • CSS 定位布局 - 相对、绝对、固定三种定位

    文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据...

    Devops海洋的渔夫
  • Django+xadmin打造在线教育平台(七)

    代码 github下载 十、授课教师  10.1.讲师列表页 拷贝teacher-list.html和teacher-detail.html到template...

    zhang_derek

扫码关注云+社区

领取腾讯云代金券