vue2中使用mint-ui,性别选择
安装需要的组件
import { DatetimePicker,Toast,Popup,Picker } from 'mint-ui';
templete部分
<div class="sex">
<span>性别</span>
<div @click="sexVisible = true">{{sex}}</div>
</div>
<div class="sexPicker">
<mt-popup
v-model="sexVisible"
position="bottom">
<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
</mt-popup>
</div>
data部分
sexVisible: false, //选择器的显示与影藏
slots: [
{
flex: 1,
values: ['男','女'],
className: 'slot1',
textAlign: 'center',
flex: 1
}
],
methods部分
onValuesChange(picker, values) {
//console.log(values)
this.sex = values[0];
this.sexVisible = false;
},
vue2中使用mint-ui,性别选择的更多相关文章
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- vue mint ui 手册文档
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
- vuetify,vux,Mint UI 等框架的选择
vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- Mint UI文档
Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- vue2.0移动端自定义性别选择提示框
这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来. 效果图: 实现代码: <template> <div c ...
- Vue移动组件库Mint UI的安装与使用
一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...
- 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
- webpack整合 vue-router 路由,模块嵌套,整合Mint UI,MUI
webpack整合 vue-router 结构 各个文件内容,一共八个文件, 还有src components 目录 Login.vue <template> <div> &l ...
随机推荐
- Learning-Python【22】:面向对象初识
一.面向过程:是一种编程思想,核心是过程二字,过程指的是解决问题的步骤,即先干什么再干什么然后干什么,基于该编程思想写程序就好比在设计一条流水线,是一种机械式的思维方式 优点:把复杂问题流程化,进而简 ...
- Query the tables and index which will caus rebuild index fail
On MSSQL server database, while rebuild index failed, we can use the follow sql statement to see if ...
- IOS面试题2018/11/17
1.设计模式是什么?你知道哪些设计模式? 设计模式是一种编码经验,就是一种成熟的逻辑去处理某一种类型的事情. 1.MVC模式:model view controller,把模型,视图,控制器 层进行解 ...
- Javascript中DataGrid表格纵线添加数据
接之前写的一篇博客http://www.cnblogs.com/Liu30/p/7229641.html,生成一个6*24的表格之后,添加数据 表格数据一般都是按行添加,我所做的这个表格是想添加一天2 ...
- 利用iframe实现无刷新提交
服务器里边:
- caffe提取每一层中的特征,在matlab或python查看
参考博客: http://blog.csdn.net/abc8730866/article/details/52522843 http://blog.csdn.net/lijiancheng0614/ ...
- 微信小程序 自定义三列城市弹窗
1.WXML <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindco ...
- laravel 路由的配置
- BFS 路径记录
有一迷宫 N*M,要求输出可通行的最短路径. 可以先倒着 BFS 一遍迷宫,这样 dis[] 数组储存的就是各点到迷宫终点的最短距离. 然后再从起点开始 BFS 一遍 dis[] ,只要满足 dis[ ...
- .net正则IP加端口,并返回IP加端口
public string GetIp(string url) { var reg = new Regex(@"\d{2,3}([.]\d{1,3}){3}:\d{2,5}"); ...