vue实现性别选择框

约定不等于承诺〃 2022-02-22 15:20 438阅读 0赞

这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能，很简单但是经常用到，于是写了一个小小的demo，记录下来。

效果图：

![376][]

图片.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>

> 原文作者：祈澈姑娘

[376]: /images/20220222/3d65f45845dd4e938652fe416a7eb578.png

发表评论取消回复

表情：

评论列表（有 0 条评论，438人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue输入框或者选择框无效，或者有延迟

问题剖析使用Vue这种成熟好用的框架，一般出现奇奇怪怪的问题都是因为操作不当导致的，例如没有合理调用组件、组件位置不正确、没有合理定义组件或者变量、样式使用不当等等..

àì夳堔傛蜴生んèń/ 2024年03月23日 22:01/ 0 赞/ 40 阅读

相关 react native仿微信性别选择-自定义弹出框

简述要实现微信性别选择需要使用两部分的技术：　　第一、是自定义弹出框；　　第二、单选框控件使用；效果 ![172074-201711101845437

r囧r小猫/ 2023年10月17日 21:06/ 0 赞/ 74 阅读

相关 Vue中-下拉框可以选择可以填写

<el-form-item label="方法名称"> <el-autocomplete popper-

Love The Way You Lie/ 2023年01月07日 03:52/ 0 赞/ 101 阅读

相关 QML 实现日期范围选择框

日期范围选择只需要组合几个组件就行了，着实很简单，这里只是水一篇。有两个要注意的地方，弹框的 closePolicy 可以设置为 Popup.CloseOnPressOu

水深无声/ 2022年12月31日 01:26/ 0 赞/ 552 阅读

相关 vue日期选择框之时间范围的使用

> 实现效果如下 ![在这里插入图片描述][20210219173503791.png_pic_center] <a-col :xl="8" :lg="16" :m

朴灿烈づ我的快乐病毒、/ 2022年10月30日 13:23/ 0 赞/ 351 阅读

相关 vue选择下拉框动态变化表单

场景：一个表单，在选择某个下拉框时，动态添加选中该下拉框值对应的输入框或下拉框等。相当于有部分输入框或下拉框是动态变化的。 <el-form :model="rule

落日映苍穹つ/ 2022年10月05日 05:49/ 0 赞/ 198 阅读

相关 Js实现将选择框的内容传递到另一个选择框中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

╰半夏微凉°/ 2022年06月11日 08:09/ 0 赞/ 172 阅读

相关 vue实现性别选择框

这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能，很简单但是经常用到，于是写了一个小小的demo，记录下来。效果图： ![376][] 图片.pn

约定不等于承诺〃/ 2022年02月22日 15:20/ 0 赞/ 439 阅读

相关 vue.js实现复选框选中取消获取选择值

<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Content-typ

╰半橙微兮°/ 2021年12月01日 12:16/ 0 赞/ 437 阅读

相关 5、vue.js 选择框select

HTML 部分代码 <div id="div_id"> <select v-model="id"> <option disabled value

谁践踏了优雅/ 2021年08月28日 18:29/ 0 赞/ 373 阅读