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

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

原创最新推荐文章于 2023-07-27 09:36:35 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

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

128 篇文章

订阅专栏

vue

15 篇文章

订阅专栏

本文介绍如何使用Vue.js进行时间格式化的全局过滤器设置，并展示了如何在表格中应用此过滤器来显示和操作数据，包括日期显示和删除功能。

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

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