1. 程式人生 > >vue2.0移動端自定義性別選擇提示框

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後前端妹子,愛程式設計,愛運營,愛折騰。 堅持總結工作中遇到的技術問題,堅持記錄工作中所所思所見,歡迎大家一起探討交流。