VUE——定義格式化時間的全局過濾器

使用品牌案例部分的代碼，修改部分如下。

                    <td>{{ item.ctime | dateFormat }}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">刪除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //全局過濾器，進行時間的格式化
        Vue.filter('dateFormat', function (dateStr){
            //根據給定的時間字符串，得到特定的時間
            var dt = new Date(dateStr)
            // yyyy-mm-dd
            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()
            return `${y}-${m}-${d}`
        })
	</script>

                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td v-text="item.name"></td>
                    <td>{{ item.ctime | dateFormat('') }}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">刪除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //全局過濾器，進行時間的格式化
        Vue.filter('dateFormat', function (dateStr, pattern){
            //根據給定的時間字符串，得到特定的時間
            var dt = new Date(dateStr)
            // yyyy-mm-dd
            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()
            if (pattern.toLowerCase() === 'yyyy-mm-dd'){
                return `${y}-${m}-${d}`
            }else{
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })
	</script>