開發過程中看長篇幅的技術文檔是件多么影響多發效率的事情丫，哼哼，人家明明只是想用個簡單的功能而已丫，下面文檔很好的解決了這個問題，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('MMMM Do YYYY, h:mm:ss a') }}</span>
效果展示：
另一種：
<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>
展示效果
吃飯去吧