安装需要的组件

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,性别选择的更多相关文章

  1. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  2. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  3. vuetify,vux,Mint UI 等框架的选择

    vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...

  4. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  5. Mint UI文档

    Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...

  6. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  7. vue2.0移动端自定义性别选择提示框

    这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来. 效果图: 实现代码: <template> <div c ...

  8. Vue移动组件库Mint UI的安装与使用

    一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...

  9. 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现

    一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...

  10. webpack整合 vue-router 路由,模块嵌套,整合Mint UI,MUI

    webpack整合 vue-router 结构 各个文件内容,一共八个文件, 还有src components 目录 Login.vue <template> <div> &l ...

随机推荐

  1. Scoket 服务器监听多个客户端发来的图片

    这是服务器 直接上代码 都有详细注释 注意线程需要自己手动关闭 不然程序会卡死 /* ######### ############ ############# ## ########### ### # ...

  2. linux下如何源码编译安装vim

    1. 获取源码 git clone https://github.com/vim/vim.git ~/vim cd ~/vim 2. 配置 ./configure --prefix=/home/jel ...

  3. asp.net mvc session锁问题

    一.会话状态Session Session用于服务器端状态管理,使用Session之后,每个客户端都可以将实际的数据保存在服务器上,对于每个客户端的数据,将会生成一个对应的唯一的key(保存在客户端) ...

  4. 716-River Crossing

    深奥dp,状态转来转去,反正就是能解题 #include <cstdio> #include <iostream> #include <cstring> #incl ...

  5. postman(三):添加断言

    进行接口测试时,添加断言时必不可少的,断言就是判断响应内容与预期返回是否一致 进行接口测试时,添加断言时必不可少的,断言就是判断响应内容与预期返回是否一致   postman可以在请求模块的Tests ...

  6. CentOS7.5下安装Python3.7 --python3

    1.将本地安装包上传到远程主机上 scp Python-3.7.0.tgz root@123.206.74.24:/root 2.扩展 安装Python之前安装Python相关的依赖包(主要是u红色部 ...

  7. Mysql增量恢复

    mysqldump增量恢复何时需要使用备份的数据? 备份最牛逼的层次,就是永远都用不上备份.--老男孩 不管是逻辑备份还是物理备份,备份的数据什么时候需要用?===================== ...

  8. 使用 erlang OTP 模式编写非阻塞的 tcp 服务器(来自erlang wiki)

    参考资料:http://erlangcentral.org/wiki/index.php/Building_a_Non-blocking_TCP_server_using_OTP_principles ...

  9. CentOS 每个版本的区别

    当我们下载CentOS 7 时会发现有几个版本可以选择,如下: 1.CentOS-7-DVD版本:DVD是标准安装盘,一般下载这个就可以了. 2.CentOS-7-NetInstall版本:网络安装镜 ...

  10. 在react/redux中使用Immutable

    在redux中使用Immutable 1.什么是Immutable? Immutable是一旦创建,就不能被更改的数据. 对Immutable对象的任何修改或添加删除操作都会返回一个新的Immutab ...