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 ...
随机推荐
- eclipse集成ijkplayer项目
1.ijkplayer是什么 ijkplayer是b站开源的一个视频插件,基于ffmpeg, 支持 Android 和 iOS,可以代替android自带的videview,有不错的体验,支持的视频文 ...
- 【XSY2988】取石子
题目来源:NOI2018模拟测试赛(二十六) 题解: 设a<b: 可以先考虑a=1的特殊情况,注意到后手的最优策略是跟着另外一个人取,取到最后剩余不到$a+b$时再看奇偶性: 那么很容易想到把所 ...
- BZOJ 3203 [SDOI2013]保护出题人 (凸包+三分)
洛谷传送门 题目大意:太长略 每新加入一个僵尸,容易得到方程$ans[i]=max{\frac{sum_{i}-sum_{j-1}}{s_{i}+d(i-j)}}$ 即从头开始每一段僵尸都需要在规定距 ...
- jQuery 简单介绍
jQuery 简单介绍 jQuery的定义 jQuery是一个快速,小巧,功能丰富的JavaScript库.它通过易于使用的API在大量浏览器中运行,使得 HTML文档遍历和操作,事件处理,动画 ...
- visual studio 2017 使用码云gitee进行源代码管理
在码云新建项目 复制项目地址 visual studio 操作 新建项目 提交到码云
- Java基础学习总结(55)——java8新特性:stream
java作为开发语言中的元老已经度过了很多年,最新的java8为我们带来了一些新特性,这些特性可以在以后的工作中为我们的开发提供更多的便捷,现在就让我们看看最新的函数式编程风格怎么在实际的开发中使用. ...
- SELECT使用子查询
SELECT使用子查询 SELECT使用子查询,该子查询会执行多次, 次数是由记录数量决定.效率比较低,不推荐使用. //查询部门编号,工资大于等于2000的人数, //工资小于2000的人 ...
- [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
- Android.mk添加本地程序和库的经常使用模版
Android.mk添加本地程序和库的经常使用模版 Android中添加本地程序或者库.这些程序和库与其所在路径没有关系.仅仅与它们的配置文件Android.mk有关.Android.mk文件里可以主 ...
- cocos2d-x:读取指定文件夹下的文件名称+解决中文乱码(win32下有效)
援引:http://blog.csdn.net/zhanghefu/article/details/21284323 http://blog.csdn.net/cxf7394373/article/d ...