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