VUE——定义格式化时间的全局过滤器

最新推荐文章于 2023-07-27 09:36:35 发布

mintsolace

最新推荐文章于 2023-07-27 09:36:35 发布

阅读量176

点赞数

分类专栏： vue 学习笔记文章标签： vue 前端

本文链接：https://blog.csdn.net/mintsolace/article/details/103132358

版权

学习笔记同时被 2 个专栏收录

128 篇文章 2 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

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

                    <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>