vue2.0移动端自定义性别选择提示框
这篇文章主要是简单的实现了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移动端自定义性别选择提示框的更多相关文章
- vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版
在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://ww ...
- echarts自定义tooltip提示框内容
1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...
- vue2.0 — 移动端的输入框实时检索更新列表
我们都是行走在这世界的孤独者 - 暖暖 最近在做vue2.0的项目遇到一个移动端实事检索搜索更新列表的效果,但用户在搜索框输入客户的电话或姓名的时候,客户列表内容会做相应的更新,下面给大家看下图~· ...
- vue2.0 移动端,下拉刷新,上拉加载更多 插件
本人正在基于 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家. 直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用 ...
- Vue2.0项目使用bootstrap后提示Module parse failed: Unexpected character
具体报错如下: 报错原因是: Vue2.0无法识别bootstrap.css中使用的字体,也就是上图中圈出来的地方. 解决方案: // 需要在webpack.config.js增加对不识别文件的处理 ...
- iOS 开发自定义一个提示框
在开发的时候,会碰到很多需要提示的地方,提示的方法也有很多种,ios 8 以前的版本有alertview还是以后用的alertController,都是这种作用, 但是不够灵活,而且用的多了,用户体验 ...
- vue2.0 移动端,下拉刷新,上拉加载更多 封装组件
前言 在做移动端的避免不了 下拉刷新,上拉加载 直接上代码吧,哈哈 组件里: <template lang="html"> <div class="yo ...
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- vue2.0 移动端,下拉刷新,上拉加载更多插件 转:
转自:http://www.cnblogs.com/gmajip/p/7204072.html <template lang="html"> <div class ...
随机推荐
- freeswitch GUI界面(portal)
1.控制台 加载模块 load mod_xml_rpc 2.ip:8080/portal 进行登录 账号 : freeswitch 密码 : works 让模块随着freeswitch启动进行加载 ...
- UNIX系统高级编程——第四章-文件和目录-总结
文件系统: 以UNIX系统V文件系统为例: 磁盘分为区,每个分区都有自己的文件系统: i节点是固定长度的记录项,包含了文件的相关信息.目录项包含文件名和i节点号.stat结构中除文件名和i节点编号 ...
- H5知识点
一.总体变化 1.H5文档结构 <!DOCTYPE html> <html> <head> <title> 这是标题 </title> ...
- 5kcrm增加权限管理中的模块(签到统计)
1 首先在model表增加模块名称 2 在controll里增加方法 3 在授权的html增加表单
- SpringAOP之CGLIB字节码增强
SpringAOP的基础原理就是动态代理 有两种实现方式:1)jdk动态代理 2)cglib动态代理 jdk动态代理和cglib动态代理的区别在于: cglib没有接口(通过继承父类) 只有实现类. ...
- 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 ...
- ASP.NET-优化websit
如何优化一个网站 1.如果是数据库的问题则尝试添加索引.优化SQL语句,如果是算法的问题,则优化算法. 2.如果对于一些不经常改动的页面可以使用静态页技术! 3.对于一些数据不需要及时更新的而且取数据 ...
- Java相关知识(一)
1. 作用域public.protected.private以及不写时的差别? public 表示公有.声明的为公共成员变量和函数成员.在整个类内类外都可使用,对全部用户开放,能够直接进行调用 pri ...
- ruby on rails错误undefined method `title' for nil:NilClass
首先搞清楚这句话,在 Ruby 中,方法分为 public.private 和 protected 三种,仅仅有 public 方法才干作为控制器的动作. 我的出错的代码例如以下: controlle ...
- 游标和动态SQL
游标类别:静态游标(指在编译的时候,游标就与一个select语句进行了静态绑定的游标.这样的游标仅仅能作用于一个查询语句)和动态游标(就是希望我们的查询语句在执行的时候才跟游标绑定.为了使用动态游标, ...