moment.js插件的简单上手使用
开发过程中看长篇幅的技术文档是件多么影响多发效率的事情丫，哼哼，人家明明只是想用个简单的功能而已丫，下面文档很好的解决了这个问题，yeah~~~
一.monent.js时间插件
1.Moment.js 文档：http://momentjs.cn/docs/
使用起来可以说是非常简单了
1. 安装插件：
npm install moment
2.main.js中引入插件
import moment from 'moment'
//全局过滤器
Vue.filter('dateFmt',(input,formatString="YYYY-MM-DD")=>{
//es5函数参数设置默认值
//const lastFormatString = formatString || '' /**
* moment(input) 把时间字符串转成时间对象
* format(formatString) 把时间对象，按照指定格式，格式化成符合条件的字符串
*/
return moment(input).format(formatString)
})
3.在相应的goodslist文件中写入 | dateFmt即可
<span>{{item.add_time | dateFmt}}</span>
4.完工：展示效果
另一个：
效果展示：
另一种：
<span>{{item.add_time | dateFmt('YYYY-MM-DD HH:mm:ss') }}</span>
结果展示
一个例子：用来辅助加深理解：可以不看
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<style>
#app {
width: 600px;
margin: 10px auto;
} .tb {
border-collapse: collapse;
width: 100%;
} .tb th {
background-color: #0094ff;
color: white;
} .tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
} .add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head> <body>
<div id="app">
<brand-manager></brand-manager>
<!-- <p>写一个组件，时间：<span style="background:yellowgreen;"v-model="time"></span></p> -->
</div> <!-- 组件的template -->
<template id="templateId">
<div> <div class="add">
编号:
<input v-model="id" type="text"> 品牌名称:
<input v-model="name" @keyup.enter="add" type="text">
<input type="button" @click="add" value="添加">
</div> <div class="add">
品牌名称:
<input type="text" v-model="keyword" @keyup.13="search" placeholder="请输入搜索条件">
</div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<!-- 动态生成内容tr -->
<tr v-if="list.length==0">
<td colspan="4">没有数据了哦</td>
</tr>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dateFmt('-')}}</td>
<td>
<a href="javascript:void(0)" @click="deleteBrand(item.id)">删除</a>
</td>
</tr>
</table> </div>
</template> </body>
<script>
//定义和注册组件
//关于命名约定 https://cn.vuejs.org/v2/guide/components.html#%E7%BB%84%E4%BB%B6%E5%91%BD%E5%90%8D%E7%BA%A6%E5%AE%9A
Vue.filter('dateFmt', function (input, operator) {
const year = input.getFullYear()
const month = input.getMonth() + 1
const day = input.getDate()
return year + operator + month + operator + day
})
Vue.component('brandManager', {
template: "#templateId",
data() {
return {
id: '',
name: '',
keyword: '',
list: [{
id: 1,
name: '宝马',
ctime: new Date()
},
{
id: 2,
name: '奥迪',
ctime: new Date()
}
],
oldList: []
}
},
// filters: {
// dateFmt(input, operator) {
// const year = input.getFullYear()
// const month = input.getMonth() + 1
// const day = input.getDate()
// return year + operator + month + operator + day
// }
// },
methods: {
//增加
add() {
console.log(this);
this.list.push({
id: this.id,
name: this.name,
ctime: new Date()
}) //清空
this.id = ''
this.name = '' this.oldList = this.list
},
//根据id删除
deleteBrand(id) {
//es6的新语法
//http://es6.ruanyifeng.com/#docs/array#%E6%95%B0%E7%BB%84%E5%AE%9E%E4%BE%8B%E7%9A%84-find-%E5%92%8C-findIndex
const index = this.list.findIndex(function (item, index, arr) {
return item.id === id;
}) //删除
this.list.splice(index, 1) this.oldList = this.list
},
//根据关键字搜索
search() {
if (this.keyword.trim().length == 0) {
this.list = this.oldList return
} //利用数组的filter方法去过滤我们元素，过滤出来之后，会形成一个新的数组
//参考:http://www.runoob.com/jsref/jsref-filter.html
const newList = this.list.filter(function (item, index, arr) {
//es6中，判断我们字符串中，是否包含得有某个字符，使用includes
//参考：http://es6.ruanyifeng.com/#docs/string#includes-startsWith-endsWith
return item.name.includes(this.keyword)
}, this) //把过滤出来的新数组，赋值给list
this.list = newList
}
}
})
const vm = new Vue({
el: "#app"
})
</script> </html>
展示效果
吃饭去吧
moment.js插件的简单上手使用的更多相关文章
- fastclick.js插件使用简单说明
为什么存在延迟? 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. ...
- VUE图片懒加载-vue lazyload插件的简单上手使用（优化版本）
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
- 使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- 免费而优秀的图表JS插件
1.百度的Echart ECharts,缩写来自Enterprise Charts,是百度推出的一款开源的,商业级数据图表,它最初是为了满足百度公司商业体系里各种业务系统(如凤巢.广告管家等等)的报表 ...
- toastr.js插件用法
toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...
- iScroll.js插件使用方法
iScroll.js 用法参考 (share) 分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍 ...
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
- web前端常用js插件
第一款:截图插件html2Canvas.js html2是一款强大的截图插件,只需引入js文件,依照官方给定的截图方法,就能截取对应DOM区域的内容.对于有些截图出现模糊偏移的问题,网上也有一堆解决方 ...
- 最牛的打字效果JS插件 typing.js
最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...
随机推荐
- Lua调用C,C++函数案例
该程序主要是C++与Lua之间的相互调用示例.执行内容:(1)新建一个lua_State(2)打开常用库,如io,os,table,string等(3)注册C函数(4)导入程序所在目录下所有*.lua ...
- 第三届蓝桥杯决赛c++b组
1.星期几 [结果填空] (满分5分) 1949年的国庆节(10月1日)是星期六. 今年(2012)的国庆节是星期一. 那么,从建国到现在,有几次国庆节正好是星期日呢? 只要 ...
- Java微信公众平台开发_03_消息管理之被动回复消息
GitHub源码:https://github.com/shirayner/weixin_gz 一.本节要点 1.回调url 上一节,我们启用服务器配置的时候,填写了一个服务器地址(url),如下图, ...
- hdu 6006
HDU - 6006 Engineer Assignment 我参考了这份题解. 贴上我比较拙的代码,留念一下. /** * 想到状态压缩的dp问题就解决了一半. */ #include <st ...
- T58
他们投产的新轿车广获传媒报道.The launch of their new saloon received much media coverage.法律规定禁止近亲结婚.Marriages in p ...
- NO0：重新拾起C语言
因工作所需,重新捡起C语言,之前在学校里有接触过,但现在已经忘的一干二净了,现决定重新开始学习,为工作,为生活. 以<标准 C程序设计 第5版>的课程进行基础学习,同时以另外两本书为辅助, ...
- 暑假集训Chapter1 贪心
为什么要今天写呢? 明天全力研究Johnson和一些奇奇怪怪的贪心 今天把能写的都写了 T1T2太水了直接上代码吧 #include<bits/stdc++.h> #define LL l ...
- 【C++】*p++ = *p不同环境下操作不同
实测,Ubuntu16.04,gcc 5.3.0&5.4.0(编译选项选择C++11和不选择新标准结果相同) #include<iostream> using namespace ...
- mongodb 常用操作符
最近常用mongodb数据库,但是很多操作符不清楚或不知道,所有抽空根据手册整理下,以便于以后查阅(基于3.4版本) 1.查询和投影操作符 1.1比较操作符 $eq 匹配字段值等于指定值的文档 { & ...
- QT（1）介绍
Qt官网 Qt官网:https://www.qt.io Qt下载:http://www.qt.io/download Qt所有下载:http://download.qt.io/archive/qt Q ...