例:需要在下图“自定义日期”中使用日期选择器

<template>
<div>
<picker mode="date" @change="bindDateChange">
<div :class="timeIndex == 4 ? 'active-time' : ''">{{anyDate}}</div>
</picker>
</div>
</template> <script>
export default {
data(){
return {
timeIndex:0,
anyDate:'自定义日期'
}
},
methods:{
bindDateChange (e) {
console.log(e)
this.anyDate = e.detail.value
this.timeIndex = 4
},
changeTime(index) {
this.timeIndex = index
this.anyDate = '自定义日期'
}
}
}
</script>

效果图:(单独分出来编辑的)点击自定义日期后显示一下效果,颜色切换为蓝色,当点击图一中的其他按钮时被点击的按钮颜色发生切换,自定义按钮颜色会回复默认(以上代码显示仅如下图所示)

uni-app中组件picker的基本使用(日期选择器为例)的更多相关文章

  1. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  2. uni app中关于图片的分包加载

    因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...

  3. uniapp中使用picker中的注意事项

    APP端中picker点击后不弹出: 1.请确保picker标签里面嵌套了一个view,并且view里面有值 2.请确保picker中的默认值的格式跟该picker类型的值对应 例如下面: <v ...

  4. 我刚知道的WAP app中meta的属性

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

  5. 在 C# App 中嵌入 Chrome 浏览器使用 CefSharp

    介绍 以前曾试过在app中整合一个可靠又快速的web浏览器吗? 在本文中,你会学到如何轻松地将奇妙的CefSharp网页浏览器组件(基于Chromium)集成到你的C# app中. 然后,你可以使用此 ...

  6. 我刚知道的WAP app中meta的属性(转载)

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

  7. Vue.js中组件传参的方法 - 基于webpack模板

    在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...

  8. Android app中的so库和CPU架构

    一.android目前有几种cpu架构? 早期的Android系统几乎只支持ARMv5的CPU架构,目前支持七种CPU架构:ARMv5,ARMv7 (从2010年起),x86 (从2011年起),MI ...

  9. 18-vue-cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...

随机推荐

  1. 搭建LAMP环境部署discuz论坛

    !!!什么是LAMP: LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写: Linux,操作系统 Apache,网页服务器 MariaDB或MySQL,数据库管理系统(或者 ...

  2. 怎么样在同一个word文件中删除不同节数的页眉

    1.双击页眉,进入页眉编辑状态2.选择准备删除页眉的节,直接额删除即可.注意:为不至于因该节的改动影响其他节的页眉,需要在页眉设置上,每节都要取消链接到前一节页眉 把那张的前面和后面都插入分隔符,在页 ...

  3. Windows10查看电脑的USB接口是2.0还是3.0

    Windows10查看电脑的USB接口是2.0还是3.0原创小晓酱手记 最后发布于2019-08-22 16:09:48 阅读数 3662 收藏展开 同事要拷贝资料给我,问我电脑的USB接口是2.0还 ...

  4. Phoenix 使用教程

    引言 hbase 提供很方便的 shell 脚本,可以对数据表进行 CURD 操作,但是毕竟是有一定的学习成本的,基本上对于开发来讲,sql 语句都是看家本领,那么,有没有一种方法可以把 sql 语句 ...

  5. 克隆并编译otter

    源码编译: git clone 项目到本地,用IDEA打开,等待Maven下载完jar包,打开命令行,进入当前项目的lib目录 执行install.bat命令,该批处理文件会将缺失的jar包安装到你本 ...

  6. TB6560步进电机驱动板

    极客工坊比较好的帖子: 关于驱动板的共阴极和共阳极接法 http://www.geek-workshop.com/thread-12695-1-1.html

  7. 一些固化了的语音识别模块demo, 手机重力传感器获取

    helloH5 这个软件里面有好多这个东东哦

  8. 案例分享:Qt modbus485调试工具(读写Byte、Int、DInt、Real、DReal)(当前v1.3.0)

    前言   西门子PLC.台达PLC.法兰克机床等等多年以前玩得比较多,有tcp/ip通讯也有modbus通讯,modbus又分为网络,485,232等.  医疗项目,焊接机器人项目,工控机床项目,数控 ...

  9. VMware vRealize Suite 8.4 发布 - 多云环境的云计算管理解决方案

    VMware vRealize Suite 8.4.0, Release Date: 2021-04-15 概述 VMware vRealize Suite 是一种多云环境的云计算管理解决方案,为 I ...

  10. 深度学习框架:GPU

    深度学习框架:GPU Deep Learning Frameworks 深度学习框架通过高级编程接口为设计.训练和验证深度神经网络提供了构建块.广泛使用的深度学习框架如MXNet.PyTorch.Te ...