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.苦 ...
随机推荐
- join()方法作用
当在主线程当中执行到t1.join()方法时,就认为主线程应该把执行权让给t1 废话不多说看代码: package com.toov5.thread; public class JoinThreadT ...
- DOM （文档对象模型(Document Object Model)
DOM(文档对象模型(Document Object Model) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上 ...
- jsp日期插件My97DatePicker 强大的日期控件 使用方便简单(转)
本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...
- 关于STM32中GPIO的8种工作模式
CSDN:http://blog.csdn.net/l20130316 博客园:http://www.cnblogs.com/luckyalan/ 1 综述 I/O口是单片机中非常常用的外设,STM3 ...
- 【Lintcode】033.N-Queens
题目: The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two que ...
- WCF的用户名+密码认证方式（转）
概述 今天在做Master Data Service(后面简称MDS)项目时需要通过WCF来使用MDS的API,从而对MDS的数据进行操作.在这个过程中,遇到了一个棘手的问题,就是在客户端调用Web ...
- mysql错误-修改mysql.sock位置
在Mysql下有时候会出现mysql.sock位置错误,导致无法链接数据库. mac下报错的时候: 首先修改my.cnf 位置在/etc/my.cnf下,假如没有的话,去/usr/locate/mys ...
- Linq 支持动态字查询集合， 也就是说根据传入的值进行查询。
Linq 支持动态字查询集合, 也就是说根据传入的值进行查询. 比如我们有个类Patient, 其中有个字段PatientName, 现在有Patient集合, 想要查询PatientName为&qu ...
- sum(sum(abs(y))) 中 sum(sum())什么意思?
>> y=[1 3;2 5] y = 1 3 2 5 >> sum(y) ans = 3 8 >> sum(s ...
- session和cookie(2)
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...