有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue实现男女性别radios选择框

vue cat 4个月前 (06-11) 44次浏览 已收录 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>
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址