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

<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. 云计算OpenStack核心组件---cinder存储服务(10)

    一.cinder介绍 1.Block Storage 操作系统获得存储空间的方式一般有两种: (1)通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘,然后分区.格式化.创建文件系统: ...

  2. HDFS 的内存存储是什么?

    引言 HDFS 的定位就是一个文件系统,用于存储文件,而 HDFS 对于文件的存储方式有两种: 内存存储 异构存储 内存存储 什么是内存存储? 首先,我们来了解一下到底什么是 "内存存储&q ...

  3. system verilog内建数据类型

  4. Jenkins 基础篇 - 任务创建

    前面了解了 Jenkins 上各种任务的区别后,我们就来实践应用下,先创建一个[文件夹]类型的任务,将我们目前的一些基础的演示任务[移动]到文件夹里面去,这样可以先做个简单的分类. 新建一个[文件夹] ...

  5. 在vue中如何使用WebSocket 以及nginx代理如何配置WebSocket

    WebSocket WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信.浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输. 浏览器支持情况 现 ...

  6. openresty 学习笔记二:获取请求数据

    openresty 学习笔记二:获取请求数据 openresty 获取POST或者GET的请求参数.这个是要用openresty 做接口必须要做的事情.这里分几种类型:GET,POST(urlenco ...

  7. Python+Selenium - 窗口切换

    当有新窗口出现时,并要在新窗口操作,步骤: 1.产生新窗口 2.获取所有窗口的句柄:driver.window_handles 3.切换函数:driver.switch_to.window(新窗口句柄 ...

  8. Spring Cloud07: Feign 声明式接口调用

    一.什么是Feign Feign也是去实现负载均衡,但是它的使用要比Ribbon更加简化,它实际上是基于Ribbon进行了封装,让我们可以通过调用接口的方式实现负载均衡.Feign和Ribbon都是由 ...

  9. (3)虚拟Web主机

    虚拟Web主机 作用:让一台Web服务器,提供多个页面 搭建方式: 1.基于域名的虚拟Web 2.基于端口的虚拟Web 3.基于IP地址的虚拟Web ######################### ...

  10. 【NX二次开发】分析曲线某位置的信息 UF_MODL_ask_curve_props

    分析曲线某位置的信息:点.切线.主副法线.半径等 extern DllExport void ufsta(char *param, int *returnCode, int rlen) { UF_in ...