这篇文章主要是简单的实现了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后前端妹子,爱编程,爱运营,爱折腾。

坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

vue2.0移动端自定义性别选择提示框的更多相关文章

  1. vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版

    在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://ww ...

  2. echarts自定义tooltip提示框内容

    1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...

  3. vue2.0 — 移动端的输入框实时检索更新列表

    我们都是行走在这世界的孤独者 - 暖暖 最近在做vue2.0的项目遇到一个移动端实事检索搜索更新列表的效果,但用户在搜索框输入客户的电话或姓名的时候,客户列表内容会做相应的更新,下面给大家看下图~· ...

  4. vue2.0 移动端,下拉刷新,上拉加载更多 插件

    本人正在基于 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家. 直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用 ...

  5. Vue2.0项目使用bootstrap后提示Module parse failed: Unexpected character

    具体报错如下: 报错原因是: Vue2.0无法识别bootstrap.css中使用的字体,也就是上图中圈出来的地方. 解决方案: // 需要在webpack.config.js增加对不识别文件的处理 ...

  6. iOS 开发自定义一个提示框

    在开发的时候,会碰到很多需要提示的地方,提示的方法也有很多种,ios 8 以前的版本有alertview还是以后用的alertController,都是这种作用, 但是不够灵活,而且用的多了,用户体验 ...

  7. vue2.0 移动端,下拉刷新,上拉加载更多 封装组件

    前言 在做移动端的避免不了 下拉刷新,上拉加载 直接上代码吧,哈哈 组件里: <template lang="html"> <div class="yo ...

  8. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  9. vue2.0 移动端,下拉刷新,上拉加载更多插件 转:

    转自:http://www.cnblogs.com/gmajip/p/7204072.html <template lang="html"> <div class ...

随机推荐

  1. eclipse集成ijkplayer项目

    1.ijkplayer是什么 ijkplayer是b站开源的一个视频插件,基于ffmpeg, 支持 Android 和 iOS,可以代替android自带的videview,有不错的体验,支持的视频文 ...

  2. 【XSY2988】取石子

    题目来源:NOI2018模拟测试赛(二十六) 题解: 设a<b: 可以先考虑a=1的特殊情况,注意到后手的最优策略是跟着另外一个人取,取到最后剩余不到$a+b$时再看奇偶性: 那么很容易想到把所 ...

  3. BZOJ 3203 [SDOI2013]保护出题人 (凸包+三分)

    洛谷传送门 题目大意:太长略 每新加入一个僵尸,容易得到方程$ans[i]=max{\frac{sum_{i}-sum_{j-1}}{s_{i}+d(i-j)}}$ 即从头开始每一段僵尸都需要在规定距 ...

  4. jQuery 简单介绍

    jQuery  简单介绍 jQuery的定义 jQuery是一个快速,小巧,功能丰富的JavaScript库.它通过易于使用的API在大量浏览器中运行,使得   HTML文档遍历和操作,事件处理,动画 ...

  5. visual studio 2017 使用码云gitee进行源代码管理

    在码云新建项目 复制项目地址 visual studio  操作 新建项目 提交到码云

  6. Java基础学习总结(55)——java8新特性:stream

    java作为开发语言中的元老已经度过了很多年,最新的java8为我们带来了一些新特性,这些特性可以在以后的工作中为我们的开发提供更多的便捷,现在就让我们看看最新的函数式编程风格怎么在实际的开发中使用. ...

  7. SELECT使用子查询

    SELECT使用子查询   SELECT使用子查询,该子查询会执行多次,  次数是由记录数量决定.效率比较低,不推荐使用.  //查询部门编号,工资大于等于2000的人数,  //工资小于2000的人 ...

  8. [SCSS] Pure CSS for multiline truncation with ellipsis

    1. Pure CSS 2. Responsive 3. No need to recalculate on resize or font’s load event 4. Cross browser

  9. Android.mk添加本地程序和库的经常使用模版

    Android.mk添加本地程序和库的经常使用模版 Android中添加本地程序或者库.这些程序和库与其所在路径没有关系.仅仅与它们的配置文件Android.mk有关.Android.mk文件里可以主 ...

  10. cocos2d-x:读取指定文件夹下的文件名称+解决中文乱码(win32下有效)

    援引:http://blog.csdn.net/zhanghefu/article/details/21284323 http://blog.csdn.net/cxf7394373/article/d ...