这篇文章主要是简单的实现了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. freeswitch GUI界面(portal)

    1.控制台 加载模块 load mod_xml_rpc 2.ip:8080/portal 进行登录  账号 : freeswitch  密码 : works 让模块随着freeswitch启动进行加载 ...

  2. UNIX系统高级编程——第四章-文件和目录-总结

    文件系统: 以UNIX系统V文件系统为例: 磁盘分为区,每个分区都有自己的文件系统: ​ i节点是固定长度的记录项,包含了文件的相关信息.目录项包含文件名和i节点号.stat结构中除文件名和i节点编号 ...

  3. H5知识点

    一.总体变化 1.H5文档结构 <!DOCTYPE html> <html> <head> <title>  这是标题  </title> ...

  4. 5kcrm增加权限管理中的模块(签到统计)

    1 首先在model表增加模块名称 2 在controll里增加方法 3 在授权的html增加表单

  5. SpringAOP之CGLIB字节码增强

    SpringAOP的基础原理就是动态代理 有两种实现方式:1)jdk动态代理 2)cglib动态代理 jdk动态代理和cglib动态代理的区别在于: cglib没有接口(通过继承父类) 只有实现类.  ...

  6. ASP.NET-js和C#混合编程的例子

    使用<text>这个伪元素来强制Razor从编译模式返回到内容模式: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...

  7. ASP.NET-优化websit

    如何优化一个网站 1.如果是数据库的问题则尝试添加索引.优化SQL语句,如果是算法的问题,则优化算法. 2.如果对于一些不经常改动的页面可以使用静态页技术! 3.对于一些数据不需要及时更新的而且取数据 ...

  8. Java相关知识(一)

    1. 作用域public.protected.private以及不写时的差别? public 表示公有.声明的为公共成员变量和函数成员.在整个类内类外都可使用,对全部用户开放,能够直接进行调用 pri ...

  9. ruby on rails错误undefined method `title&#39; for nil:NilClass

    首先搞清楚这句话,在 Ruby 中,方法分为 public.private 和 protected 三种,仅仅有 public 方法才干作为控制器的动作. 我的出错的代码例如以下: controlle ...

  10. 游标和动态SQL

    游标类别:静态游标(指在编译的时候,游标就与一个select语句进行了静态绑定的游标.这样的游标仅仅能作用于一个查询语句)和动态游标(就是希望我们的查询语句在执行的时候才跟游标绑定.为了使用动态游标, ...