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.苦 ...
随机推荐
- unix下面是常用命令及简单说明
摘自:http://blog.sina.com.cn/s/blog_629b80af01018k7x.html 命令 功能简述 acctcom 等于进程记帐文件 accton 启动或中止记帐进程 ad ...
- Ubuntu 17.4下如何安装和配置flash player
Ubuntu Linux系统下没有自带的flash player,要自己手动安装.下面post出简单的安装过程. 首先打开终端,输入命令:sudo apt-get install flashplugi ...
- python之tkinter_2
关于tkinter的组件介绍,这篇博客很详细: https://www.cnblogs.com/aland-1415/p/6849193.html tkinter is to make interfa ...
- BZOJ 1626 [Usaco2007 Dec]Building Roads 修建道路：kruskal（最小生成树）
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1626 题意: 有n个农场,坐标为(x[i],y[i]). 有m条原先就修好的路,连接农场( ...
- BZOJ 1685 [Usaco2005 Oct]Allowance 津贴：贪心【给硬币问题】
题目链接:http://begin.lydsy.com/JudgeOnline/problem.php?id=1333 题意: 有n种不同币值的硬币,并保证大币值一定是小币值的倍数. 每种硬币的币值为 ...
- 实现远程连接MySQL
首先登录远程服务器,然后登录mysql:mysql -u用户 -p密码; 创建允许远程登录的用户并赋权:grant all privileges on 数据库.表名 to 用户名@'IP地址' ide ...
- OpenCV——PS 滤镜算法之极坐标变换到平面坐标
// define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...
- 每天一个linux命令（1）：man命令
版权声明 更新:2017-04-19博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下命令man. 2 ...
- 搭建基于Nagios的监控系统——之监控远程Linux服务器
上一篇介绍了如何安装Nagios Core,这一篇跟大家分享一下如何将一台远程的Linux服务器加入纳入监控范围. 第一部分:在远程Linux上安装Nagios Plugins和NRPE 第一步: ...
- Hibernate中注解的开发
转自:https://blog.csdn.net/liujiahan629629/article/details/22335563 在利用注解开发数据库持久层以前,需要学习一个规范JPA(JavaPe ...