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

最新推荐文章于 2024-09-20 13:42:36 发布

转载最新推荐文章于 2024-09-20 13:42:36 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ting6/p/9725278.html

文章标签：

#javascript #前端 #ViewUI

本文介绍了一个简单的Vue2.0移动端性别选择组件的实现，通过使用radio按钮和v-model实现性别选择功能，适用于各种移动端应用。

这篇文章主要是简单的实现了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>