<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. SpringCloud-Consul开发环境配置

    一.consul安装 1.下载:https://www.consul.io/downloads.html: 2.选择版本:本人开发环境是windows,所以选择win64: 3.安装:保存至D:/Sp ...

  2. ElasticSearch 中文分词搜索环境搭建

    ElasticSearch 是强大的搜索工具,并且是ELK套件的重要组成部分 好记性不如乱笔头,这次是在windows环境下搭建es中文分词搜索测试环境,步骤如下 1.安装jdk1.8,配置好环境变量 ...

  3. IntelliJ IDEA live template 方法配置

    ** * <p></p> * 功能描述 * $params$ * @return $return$ * @author abc * @date $time$ $date$ * ...

  4. 去世父亲在儿子手机中复活,这可能是最温暖的一个AI

    美国青年James Vlahos的父亲不幸因病去世,但聊以慰藉的是,现在他每天还能和父亲聊天并收到回复,而且父亲在回复中的口吻与语气,就仿佛还「活着」一样. 这并不是恐怖片剧情,而是科技的魔幻力量:回 ...

  5. 事件绑定+call apply指向

    JS高级 事件—— 浏览器客户端上客户触发的行为都称为事件 所有事件都是天生自带的,不需要我们去绑定,只需要我们去触发,通过obj.事件名=function(){ } 事件名:onmousemove: ...

  6. CSS揭秘-半透明边框与多重边框

    场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为   解决方案: 使用backgroun ...

  7. Django:RestFramework之-------权限

    4.restframework-权限 4.1权限: 权限在单个视图应用. class MyPermission(object): """认证类""&q ...

  8. 编写可维护的JavaScript-随笔(四)

    避免使用全局变量 一.全局变量带来的问题 a)      命名冲突 i.          当全局变量和全局函数越来越多时,发生命名冲突的概率也随之增高 ii.          如果函数中使用了外部 ...

  9. Java 使用properties配置文件加载配置

    一般我们不把数据库的配置信息写死在代码中. 写好代码后,编译.调试,成功后只把输出目录中的东西(jar包..class文件.资源文件等)拷贝到服务器上,由运维来管理.服务器上是没有源文件的(.java ...

  10. OCR1:开源库

    OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗.亮的模式确定其形状,然后用字符识别方法将形状翻译 ...