<input id="time1"  readonly="readonly"  placeholder="这里选择时间" v-model='input3' />
——
<input id="time2" readonly="readonly" placeholder="这里选择时间" v-model='input4'/>

在vue数据data中定义两个对应的数据

        input3: '',
input4: '',

在vue初始化时处理laydata绑定事件  ,这里使用的延迟加载,为了避免顺序问题导致无法使用

在时间选择结束时将值赋给vue的数据,不然vue的数据并没有随着时间改变而改变

         //用于数据初始化
created:function(){
setTimeout( function(){
laydate.render({
elem: "#time1", //指定元素
type: 'datetime',
format:'yyyy-MM-dd HH:mm:ss',
trigger: 'click',
done:function(value, date, endDate){
vue.input3=value;
}
});
laydate.render({
elem: "#time2", //指定元素
type: 'datetime',
format:'yyyy-MM-dd HH:mm:ss',
trigger: 'click',
done:function(value, date, endDate){
vue.input4=value;
}
});
}, * );
},

需要引入vue.js和laydate.js

vue中使用时间插件、vue使用laydate的更多相关文章

  1. Vue中better-scroll插件的使用

    实现原理:父容器固定高度,并设置属性overflow: hidden,使得子元素高度超出容器后能被隐藏.better-scroll作用在父容器上.1.npm安装better-scroll插件.npm ...

  2. Vue学习之--------Vue中自定义插件(2022/8/1)

    文章目录 1.插件的基本介绍 2.实际应用 2.1 目录结构 2.2 代码实例 2.2.1 学校组件(School.vue) 2.2.2 学生组件(Student.vue) 2.2.3 定义的插件 2 ...

  3. vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  4. Vue Google浏览器插件 Vue Devtools无法使用的解决办法

    1.插件安装不必多说  一定要用Vue.js 开发版    Vue.min.js 在控制面板就不会显示 2.本地调试 用的是file://协议 修改插件允许访问文件网址  打上对勾

  5. vue中常用插件(货币、日期)

    货币插件: 价格格式化 // https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/currency.js const digit ...

  6. Vue中qs插件的使用

    qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库. 在项目中使用命令行工具输入:npm install qs安装完成后在需要用到的组件中:import qs from ‘qs’具体使用中 ...

  7. vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

    第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...

  8. Vue安装及插件Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  9. [vue]初探vue生态核心插件Vuex

    为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...

随机推荐

  1. Java自学-面向对象 方法

    Java类的方法 在LOL中,一个英雄可以做很多事情,比如超神,超鬼,坑队友 能做什么在类里面就叫做方法 示例 1 : 什么是方法 比如队友残血正在逃跑,你过去把路给别人挡住了,导致他被杀掉. 这就是 ...

  2. w3c网站案例

    w3c网站 reset操作 body { background-color: #eee; } html, body, h1, h2, h3, h4, h5, h6, ul, p { margin: 0 ...

  3. 常用模块 - logging模块

    一.简介 logging模块定义的函数和类为应用程序和库的开发实现了一个灵活的事件日志系统.logging模块是Python的一个标准库模块,由标准库模块提供日志记录API的关键好处是所有Python ...

  4. ZooKeeper基本介绍

    一.入门 1.1 概述 Zookeeper是一个开源的分布式的,为分布式应用提供协调的Apache项目.可用于服务发现,分布式锁,分布式领导选举,配置管理等. Zookeeper从设计模式角度来理解: ...

  5. RabbitMQ基本概念(三)-Centos7下安装RabbitMQ3.6.1

    如果你看过前两章对RabbitMQ已经有了一定了解,现在已经摩拳擦掌,来吧动手吧! 用什么系统 本文使用的是Centos7,为了保证对linux不太熟悉的伙伴也能轻松上手(避免折在安装的路上),下面是 ...

  6. Ansible-概念

    控住节点 任何装有Ansible的机器.您可以从任何控制节点调用/usr/bin/ansible或来运行命令和剧本/usr/bin/ansible-playbook.您可以将任何安装了Python的计 ...

  7. 基于PXE网络启动的Linux系统自动化安装

      在实际工作中,传统纯手动安装操作系统的方式是有一定的局限性的,例如:现在大多数的服务器都不自带光驱,若要安装系统需要外接光驱插入光盘,整个安装过程中需要人工交互确认,手动设置每一个安装设置项,人必 ...

  8. 分布式限流组件-基于Redis的注解支持的Ratelimiter

    原文:https://juejin.im/entry/5bd491c85188255ac2629bef?utm_source=coffeephp.com 在分布式领域,我们难免会遇到并发量突增,对后端 ...

  9. 在kubernetes集群中部署ElasticSearch集群--ECK

    Elastic Cloud on Kubernetes (ECK) ---ECK是这个说法哈. 基本于k8s operator的官方实现. URL: https://www.elastic.co/gu ...

  10. koa-session 知识点

    github 网址:https://github.com/koajs/session session 是一个对象