安装需要的组件

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. Learning-Python【22】:面向对象初识

    一.面向过程:是一种编程思想,核心是过程二字,过程指的是解决问题的步骤,即先干什么再干什么然后干什么,基于该编程思想写程序就好比在设计一条流水线,是一种机械式的思维方式 优点:把复杂问题流程化,进而简 ...

  2. 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 ...

  3. IOS面试题2018/11/17

    1.设计模式是什么?你知道哪些设计模式? 设计模式是一种编码经验,就是一种成熟的逻辑去处理某一种类型的事情. 1.MVC模式:model view controller,把模型,视图,控制器 层进行解 ...

  4. Javascript中DataGrid表格纵线添加数据

    接之前写的一篇博客http://www.cnblogs.com/Liu30/p/7229641.html,生成一个6*24的表格之后,添加数据 表格数据一般都是按行添加,我所做的这个表格是想添加一天2 ...

  5. 利用iframe实现无刷新提交

    服务器里边:

  6. caffe提取每一层中的特征,在matlab或python查看

    参考博客: http://blog.csdn.net/abc8730866/article/details/52522843 http://blog.csdn.net/lijiancheng0614/ ...

  7. 微信小程序 自定义三列城市弹窗

    1.WXML <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindco ...

  8. laravel 路由的配置

  9. BFS 路径记录

    有一迷宫 N*M,要求输出可通行的最短路径. 可以先倒着 BFS 一遍迷宫,这样 dis[] 数组储存的就是各点到迷宫终点的最短距离. 然后再从起点开始 BFS 一遍 dis[] ,只要满足 dis[ ...

  10. .net正则IP加端口,并返回IP加端口

    public string GetIp(string url) { var reg = new Regex(@"\d{2,3}([.]\d{1,3}){3}:\d{2,5}"); ...