浅谈vant组件Picker 选择器选单选问题


Posted in Javascript onNovember 04, 2020

1.写遮罩

浅谈vant组件Picker 选择器选单选问题

2.定义data

浅谈vant组件Picker 选择器选单选问题

3.写事件

浅谈vant组件Picker 选择器选单选问题

4.效果图

浅谈vant组件Picker 选择器选单选问题

补充知识:vue使用vant编辑用户性别

我就废话不多说了,大家还是直接看代码吧~

<van-cell title="性别" is-link :value="user.gender===1?'男':'女'" @click="isEditGenderShow=true"></van-cell>
<!-- 编辑用户性别 -->
  <van-action-sheet
   v-model="isEditGenderShow"
   :actions="actions"
   cancel-text="取消"
   close-on-click-action
   @cancel="onCancel"
   @select="onGenderSelect"
  />
<script>
export default {
 name: "EditUserINfo",
 components: {},
 props: {},
 data() {
  return {
   
   isEditGenderShow: false,
   // name会显示出来,value是我们自己添加的
   actions: [{ name: "男",value: 1 }, { name: "女",value:0 }]
  };
 },
 watch: {},
 computed: {
  
 },
 methods: {
  onGenderSelect(data) {
   this.user.gender=data.value
   this.isEditGenderShow=false
  },
  
 },
 created() {},
 mounted() {}
};
</script>

以上这篇浅谈vant组件Picker 选择器选单选问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Ajax使用 全解析
Dec 15 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
AngularJS手动表单验证
Feb 01 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 #Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 #Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 #Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 #Javascript
解决vant-UI库修改样式无效的问题
Nov 03 #Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 #Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 #Javascript
You might like
php自动获取目录下的模板的代码
2010/08/08 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
Js获取事件对象代码
2010/08/05 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
js实现轮播图特效
2020/05/28 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
简单了解python反射机制的一些知识
2019/07/13 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
python定时截屏实现
2020/11/02 Python
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
租房合同协议书
2014/04/09 职场文书
人工作失职检讨书
2015/05/05 职场文书
公司辞职信模板
2015/05/13 职场文书
小学运动会宣传稿
2015/07/23 职场文书
2016年党建工作简报
2015/11/26 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python