【vue】vue +element 搭建项目,将js函数变成vue的函数
demo:时间转换
1.目录
《1》在src文件夹下新建文件夹prototypefns--------在此文件夹创建util.js,
《2》在prototypefns下新建文件夹jsTime--------在此文件夹下新建datatime.js
datatime.js
/**
* 将时间转换成时间戳
* @param DateTime 为时间格式下的时间 2018/06/14 13:00:00或2018-06-14 13:00:00
* @returns {number}
* @constructor
*/
let DateToUnix = function (DateTime) {
var oDate = new Date(Date.parse(DateTime.replace(/-/g, "/")));
var Unix = oDate.getTime();
return Unix;
}
let DeCa = function (Natural) {
var NaturalNum;
if (Natural < 10) {
NaturalNum = "0" + Natural;
} else {
NaturalNum = Natural;
}
return NaturalNum;
}
/**
* 将时间戳转化为时间
* @param UnixTime 时间 格式 2018/06/14 13:00:00
* @param ShowTime 时间展示格式 选择 2018/06/14 13:00:00或2018-06-14 13:00:00等等格式
* @constructor
*/ let UnixToDate = function (UnixTime, ShowTime) {
var ToUnix = new Date(UnixTime);
var Years = ToUnix.getFullYear();//获取年 例子:2018
var Month = ToUnix.getMonth() + 1;//获取月(0-11,0代表1月)
var Day = ToUnix.getDate();//获取日(0-31)
var Week = ToUnix.getDay();//获取星期(0-6;0代表星期天)
var Hours = ToUnix.getHours();//获取小时(0-23)
var Minutes = ToUnix.getMinutes();//获取分钟(0-59)
var Seconds = ToUnix.getSeconds();//获取秒
var DaTime;
if (ShowTime == 2) {
DaTime = Years + "/" + DeCa(Month) + "/" + DeCa(Day) + " " + DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds);
} else if (ShowTime == 3) {
DaTime = Years + "年" + DeCa(Month) + "月" + DeCa(Day) + "日 " + DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds);
} else if (ShowTime == 4) {
DaTime = Years + "年" + DeCa(Month) + "月" + DeCa(Day) + "日";
} else if (ShowTime == 5) {
DaTime = Years + "/" + DeCa(Month) + "/" + DeCa(Day);
} else if (ShowTime == 6) {
DaTime = Years + "-" + DeCa(Month) + "-" + DeCa(Day);
} else if (ShowTime == 7) {
DaTime = DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds);
} else if (ShowTime == 8) {
DaTime = DeCa(Hours) + "时" + DeCa(Minutes) + "分" + DeCa(Seconds) + "秒";
} else if (ShowTime == 9) {
DaTime = "星期" + Week;
} else if (ShowTime == 10) {
DaTime = NumBerToHanZi(Years) + "年" + NumBerToHanZi(Month) + "月" + NumBerToHanZi(Day) + "日 星期" + NumBerToHanZi(Week);
} else if (ShowTime == 11) {
DaTime = Years + "-" + DeCa(Month) + "-" + DeCa(Day) + " " + DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds) + " 星期" + Week;
} else if (ShowTime == 12) {
DaTime = Years + "/" + DeCa(Month) + "/" + DeCa(Day) + " " + DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds) + " 星期" + Week;
} else if (ShowTime == 13) {
DaTime = Years + "年" + DeCa(Month) + "月" + DeCa(Day) + "日 " + DeCa(Hours) + "时" + DeCa(Minutes) + "分" + DeCa(Seconds) + "秒 星期" + Week;
} else {
DaTime = Years + "-" + DeCa(Month) + "-" + DeCa(Day) + " " + DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds);
}
return DaTime;
}
//将阿拉伯数字转换成汉字
let NumBerToHanZi = function (Numbers) {
var strIns, chnStr = '';
var chnNumChar = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
while (Numbers > 0) {
var v = Numbers % 10;
strIns = chnNumChar[v];
chnStr = chnNumChar[v] + chnStr;
Numbers = Math.floor(Numbers / 10);
}
return chnStr;
}
// 计算时间差
let DownTime = function (EndTime) {
//如果为时间戳
var EndTimes = new Date(EndTime).getTime();//结束时间 var NowTime = new Date().getTime();//当前时间 var DeltaT = EndTimes - NowTime;
//计算出相差天数
var days = Math.floor(DeltaT / (24 * 3600 * 1000)); //计算出小时数 var leave1 = DeltaT % (24 * 3600 * 1000);
var H = Math.floor(leave1 / (3600 * 1000));
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000);
var M = Math.floor(leave2 / (60 * 1000));
//计算相差秒数
var leave3 = leave2 % (60 * 1000);
var S = Math.round(leave3 / 1000);
var reminder;
if (DeltaT > 0) {
if (days != "") {
reminder = days + "天 " + H + "小时 " + M + " 分钟" + S + " 秒";
} else if (days == "" || H != "") {
reminder = H + "小时 " + M + " 分钟" + S + " 秒";
}
} else {
reminder = "请注意!时间到了!";
}
return reminder; }
export { DateToUnix, UnixToDate, NumBerToHanZi, DownTime }
util.js
import { DateToUnix, UnixToDate, NumBerToHanZi, DownTime } from '@/prototypefns/jsTime/datatime'; export default{
install (Vue,options) {
/*时间转换器*/
Vue.prototype.dateToUnix = DateToUnix;//转换时间戳
Vue.prototype.unixToDate = UnixToDate;//转换时间
Vue.prototype.downTime = DownTime;//倒计时
Vue.prototype.numBerToHanZi = NumBerToHanZi;//转汉字 }
}
2.在main.js引入,并全局注册
import util from '@/prototypefns/util'
Vue.use(util);
3.应用
<!--
des:将js函数变成vue的函数
-->
<template>
<div class="app-container ">
<div class="input">
<input type="text " value="2018-06-15 11:23:39">
<span class="input-btn" @click="toUnix">转换时间戳</span>
<span v-text="unixTime"></span>
</div>
<div class="input">
<input type="text " value="1529033019000">
<span class="input-btn" @click="toDate">转换时间</span>
<span v-text="dateTime"></span>
</div>
<div class="input">
<input type="text " value="2018/12/12 23:59:59">
<span class="input-btn" @click="toDownTime">倒计时</span>
<span v-text="downTimeRes"></span>
</div>
<div class="input">
<input type="text " value="123456789">
<span class="input-btn" @click="toHanZi">转汉字</span>
<span v-text="hanZi"></span>
</div> </div>
</template>
<script>
export default {
data() {
return {
requestData: [{
"id": "2",
"name": "JAVA",
"parentid": "0",
"order": "2",
}],
requestJson:'',
unixTime:'',
dateTime:'',
downTimeRes:'',
hanZi:'' }
},
created(){
this.requestJson = this.json2html(this.requestData);
},
methods: {
toUnix(){
this.unixTime = this.dateToUnix('2018-06-15 11:23:39');
},
toDate(){
this.dateTime = this.unixToDate(Number('1529033019000'));
},
toDownTime(){
this.downTimeRes = this.downTime('2018/12/12 23:59:59');
},
toHanZi(){
this.hanZi = this.numBerToHanZi('123456789');
}
},
}
</script>
<style>
.input{
display: flex;
}
.input-btn{
display: block;
background: red;
color: #fff;
font-size: 12px;
height: 20px;
line-height: 20px;
width: 100px;
text-align: center;
cursor: pointer;
margin: 0 50px;
}
</style>
4.效果:
相关资料:
- https://zhidao.baidu.com/question/588776134256604845.html
作者:smile.轉角
QQ:493177502
【vue】vue +element 搭建项目,将js函数变成vue的函数的更多相关文章
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- vue教程3-webpack搭建项目
vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...
- 使用VUE CLI3.0搭建项目vue2+scss+element简易版
1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...
- 【vue】vue +element 搭建项目,mock模拟数据(纯干货)
1.安装mockjs依赖 (c)npm install mockjs --save-dev 2.安装axios(Ajax) (c)npm install --save axios 3.项目目录 4.设 ...
- 【vue】vue +element 搭建项目,vuex中的store使用
概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...
- 【vue】使用vue+element搭建项目,Tree树形控件使用
1.依赖安装 本例中,使用render-content进行树节点内容的自定义,因此需要支持JSX语法.(见参考资料第3个) 在Git bash中运行一下指令 cnpm install\ babel-p ...
- 【vue】vue +element 搭建项目,vue-cli 如何打包上线
以自己的项目为例 第一步:手动修改config文件夹中的index.js文件中的build对象,将 assetsPublicPath 中的 “/” ,改为 “你实际的加载路径” 如图: 第二步:执行( ...
- 【vue】vue +element 搭建项目,要求既支持pc端又支持移动端
使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () { if(document.documentElement.client ...
- 【vue】vue +element 搭建项目,组件之间通信
父子组件通信 父 通过props属性给 子传递数据 子 操作 父 this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...
随机推荐
- 汇编语言--微机CPU的指令系统(五)(转移指令)
(9)转移指令 转移指令是汇编语言程序员经常使用的一组指令.在高级语言中,时常有“尽量不要使用转移语句”的劝告,但如果在汇编语言的程序中也尽量不用转移语句,那么该程序要么无法编写,要么没有多少功能,所 ...
- 5; XHTML图像
1.背景图案的设置 2.将图片插入到网页中去 3.用图像作为超链接 4.使用工具建立地图索引 5.切片索引 6.为网站添加图标 5.1 背景图案的设置 格式:<body background=” ...
- 《从零开始学习jQuery》:用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...
- Linux 安装 jdk8
切换目录 cd /usr 创建目录 mkdir java cd java 下载 jdk rz 或者 ftp 都行,只要能成功上传 解压 tar zxvf jdk-8u181-linux-x64.tar ...
- concrrent类下ReentrantReadWriteLock类的原理以及使用
1.ReentrantreadWriteLock 类的介绍 Lock接口下的子类存在 ReentrantLock子类,该子类是一个线程同步处理类:ReentrantLock类的介绍详见XXX: Loc ...
- Javascript 流程控制
流程控制 JavaScript通过流程语句来执行程序流,程序流有若干语句组成.在正常情况下,程序中 的语句时按照书写顺序执行的,这种结构称为顺序结构.除了顺序结构之外还有选择结构和循环结构. 1.选择 ...
- python+selenium+PhantomJS爬取网页动态加载内容
一般我们使用python的第三方库requests及框架scrapy来爬取网上的资源,但是设计javascript渲染的页面却不能抓取,此时,我们使用web自动化测试化工具Selenium+无界面浏览 ...
- Android为TV端助力 关于线程的那些事
今天发现之前自己一直有个误区,new Runnable(run()方法){}原来它不是一定创建一个线程 如果用主线程的handler去post(Runnable),他就不会创建子线程,而是在主线程上执 ...
- Android IPC机制(五)用Socket实现跨进程聊天程序
1.Socket简介 Socket也称作“套接字“,是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用以实现进程在网络中通信.它分为流式套接字和数据包套接 ...
- Windows桌面或服务器环境下嵌入JavaScript支持(JSRT)
很多人比较关注Google的JS V8 JavaScript引擎,确实Google最近很高调.但这个库在Windows下使用确实有点难度,即使在Linux嵌入,也需要下载gyp,编译安装,然后再下载v ...