浅谈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 相关文章推荐
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
JS实现字符串翻转的方法分析
Aug 31 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
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 文件上传功能实现代码
2009/06/24 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
Angular6封装http请求的步骤详解
2018/08/13 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
歌颂祖国演讲稿
2014/05/04 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
《西门豹》教学反思
2016/02/23 职场文书