简单的实现了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>