moment.js插件的简单上手使用
生活随笔
收集整理的這篇文章主要介紹了
moment.js插件的简单上手使用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
開發(fā)過程中看長篇幅的技術(shù)文檔是件多么影響多發(fā)效率的事情丫，哼哼，人家明明只是想用個簡單的功能而已丫，下面文檔很好的解決了這個問題，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函數(shù)參數(shù)設(shè)置默認(rèn)值
//const lastFormatString = formatString || ''
/**
* moment(input) 把時間字符串轉(zhuǎn)成時間對象
* format(formatString) 把時間對象，按照指定格式，格式化成符合條件的字符串
*/
return moment(input).format(formatString)
})
3.在相應(yīng)的goodslist文件中寫入 | dateFmt即可
<span>{{item.add_time | dateFmt}}</span>
4.完工：展示效果
另一個：
<span>{{item.add_time | dateFmt('MMMM Do YYYY, h:mm:ss a') }}</span>
效果展示：
另一種：
<span>{{item.add_time | dateFmt('YYYY-MM-DD HH:mm:ss') }}</span>
結(jié)果展示
一個例子：用來輔助加深理解：可以不看
<!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>寫一個組件，時間：<spanv-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>創(chuàng)立時間</th>
<th>操作</th>
</tr>
<!-- 動態(tài)生成內(nèi)容tr -->
<tr v-if="list.length==0">
<td colspan="4">沒有數(shù)據(jù)了哦</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>
//定義和注冊組件
//關(guān)于命名約定 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
},
//根據(jù)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
},
//根據(jù)關(guān)鍵字搜索
search() {
if (this.keyword.trim().length == 0) {
this.list = this.oldList
return
}
//利用數(shù)組的filter方法去過濾我們元素，過濾出來之后，會形成一個新的數(shù)組
//參考: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)
//把過濾出來的新數(shù)組，賦值給list
this.list = newList
}
}
})
const vm = new Vue({
el: "#app"
})
</script>
</html>
View Code
展示效果
吃飯去吧
總結(jié)
以上是生活随笔為你收集整理的moment.js插件的简单上手使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： object-c 运行时显示view没有
- 下一篇： 用Gridview和ObjectData