momentjs在vue中的用法

js代码

import moment from ‘moment‘;

const jsCountDown = document.getElementById(‘js-countdown‘);

const targetTime = new Date(‘2018-10-4‘);

const countdownFn = () =>{

const now = moment();

const end = moment(targetTime);

const diffDay = now.diff(end,‘days‘);

const diffH = now.diff(end,‘hours‘) % 24;

const diffM = now.diff(end,‘minutes‘) % 60;

const diff = now.diff(end, ‘seconds‘) % 60;

// console.log(diffDay,diffH,diffM);

// console.log(diffDay);

jsCountDown.querySelector(‘.day‘).innerHTML = - diffDay;

jsCountDown.querySelector(‘.hours‘).innerHTML = - diffH;

jsCountDown.querySelector(‘.minutes‘).innerHTML = - diffM;

jsCountDown.querySelector(‘.second‘).innerHTML = - diff;

// if (diff >= 0) {

// return;

// }

setTimeout(() => {

countdownFn();

}, 10);

}

countdownFn();

html代码

<div class="inner" id="js-countdown">

<i class="icon-time"></i>

<span class="day">1</span>

<span class="hours">1</span>

<span class="minutes">1</span>

<span class="second">1</span>

</div>

原文地址:https://www.cnblogs.com/shuen/p/9675782.html

时间: 2024-08-05 21:40:21

momentjs在vue中的用法的相关文章

分享vue中 slot用法

//slot默认用法 //slot带参数name用法

vue中style的用法

最近学习了vue中class和class的用法,想来总结一下,也把我的知识提供给大家使用:首先来总结class的用法,vue中的class有4种写法;class和style都属于DOM属性,所以在vue中都用:class和:style表示 同样给id为box的div加上字体和颜色和背景颜色 方法一 <div id="box"> <strong :style="{color:'red',background:'blue'}">落入凡尘伤情着我&

vue中watch的详细用法

在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } }) 直接写一个监听处理函数,当每次监听到 cityNam

----Vue 中mixin 的用法详解----

说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

详解Vue中watch的高级用法

我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName. handler方法和immediate属性 这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算.那我们想要一开始就让他最初绑定的时候就执行改怎么办呢?我们需要修改一下我们的 watch 写法,修改过后的 wa

VUE中关于$emit的用法

一.事件 关于什么是JavaScript事件可以参考:https://www.w3schools.com/js/js_events.asp 二.$emit vue中对$emit的定义见: vm.$emit( eventName, [-args] ) 参数: {string} eventName [...args] 触发当前实例上的事件.附加参数都会传给监听器回调. 三.用途与示例 1.父组件可以使用 props 把数据传给子组件. 1.子组件可以使用 $emit 触发父组件的自定义事件. 子组件

vue 中 scoped的用法 以及css文件引入问题的补充

自:https://blog.csdn.net/weixin_39941429/article/details/80254724 下面再说说VUE中scoped的编译原理吧.具体可以参考vue-loader 所谓的局部css,就是通过vue-loader这个插件,在编译打包的时候将带有scoped属性的css打上一个tag,同时将template内的所有html都打上一个相同的tag,最后通过css的属性选择器定位,造就了所谓的局部css.参考scoped内复写组件样式 css-loader对i

Vue中echarts的基本用法

前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的echarts.下面按步骤讲解. 第一步:安装echarts依赖包,然后引入,注意最好在当前使用的组件中引入,而不需要在main.js中注册. //1.首先引入 import echarts from "echarts"; 第二步:在页面中创建一个盒子,用来装载图表 <!-- 2.为e

Vue组件基础用法

前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦.本文将详细介绍Vue组件基础用法 概述 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能.通过Vue.js的声明式渲染后,