zoukankan      html  css  js  c++  java
  • 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后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

  • 相关阅读:
    3.30作业
    3.30课堂
    3.29作业
    3,29课堂
    3。26作业
    3.26课堂
    3.25作业
    3.25课堂
    55、DOM与BOM的操作及事件的简介
    54、js的数据类型及对象
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701278.html
Copyright © 2011-2022 走看看