首页 > 其他 > 详细

vue实现性别选择框

时间:2020-01-21 01:07:02      阅读:736      评论:0      收藏:0      [点我收藏+]

简单的实现了vue2.0移动端自定义性别选择的功能,一个小的demo

  1. <template>
  2. <div class="app">
  3. <div class="boy">
  4. <input type="radio" name="radios" value="1" v-model="param"><label></label>
  5. </div>
  6. <div class="girl">
  7. <input type="radio" name="radios" value="2" v-model="param"><label></label>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. param: ‘1‘ //设置默认值为1,即设置第一个单选框为选中状态
  16. }
  17. },
  18. methods: {
  19. }
  20. };
  21. </script>
  22. <style>
  23. .app{
  24. height:60px;
  25. background: #fff;
  26. border: 1px solid #f1ebeb;
  27. }
  28. .boy{
  29. height:30px;
  30. background: fff;
  31. border-bottom: 1px solid #f1ebeb;
  32. }
  33. .boy input{
  34. text-align: center;
  35. }
  36. .boy label{
  37. text-align: center;
  38. }
  39. .girl{
  40. height:30px;
  41. background: fff;
  42. }
  43. </style>

vue实现性别选择框

原文:https://www.cnblogs.com/pp8080/p/12219892.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!