filters

最新推荐文章于 2024-09-13 14:34:15 发布

xiaozhang21

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量90

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/ztc213421/article/details/133912619

版权

过滤器

如果有些时候我们需要给数据进行特定方式绑定

格式：

1 在filters里边写上自定义方法名

filters: {

// value就是 | 前边的值

自定义方法名(value) {

return 表达式

}

2 在{{}}中使用 | 自定义方法名来格式化数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        filters
            过滤器
            如果有些时候 我们需要给数据进行特定方式绑定
            格式：
                1 在filters里边写上自定义方法名
                filters: {
                    // value就是 | 前边的值
                    自定义方法名(value) {
                        return 表达式
                    }
                }

                2 在{{}}中使用 | 自定义方法名来格式化数据
                {{data数据 | 自定义方法名}}
    -->
    <div id="app">
        {{msg.split("").reverse().join("")}}
        <p>{{msg | filterMsg}}</p>
        <p>
            {{book | filterBook}}
        </p>
        <p>
            {{book1 | filterBook}}
        </p>
        <ul>
            <li v-for="(stu, index) in stus" :key="index"> {{stu.time | filterTime}}</li>
        </ul>
    </div>
</body>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: 'hello',
            book: '西游记',
            book1: '查理九世',
            stus: [
                {
                    id: 1,
                    name: '张三',
                    age: 15,
                    time: '2023-10-07T08:16:58.679Z'
                },
                {
                    id: 2,
                    name: '赵四',
                    age: 18,
                    time: '2023-05-05T13:07:12.548Z'
                }
            ]
        },
        filters: {
            filterMsg(value) {
                return value.split("").reverse().join("")
            },
            filterBook(value) {
                // value对应的就是 | 前边的值
                return "<<" + value + ">>"
            },
            filterTime(value) {
                return (new Date().getTime() - new
                    Date(value).getTime()) / 1000 < 60 ? Math.floor((new Date().getTime() - new
                        Date(value).getTime()) / 1000) + '秒前' : Math.floor((new Date().getTime() - new
                            Date(value).getTime()) / 1000 / 60) < 60 ? Math.floor((new Date().getTime() - new
                                Date(value).getTime()) / 1000 / 60) + '分前' : Math.floor((new Date().getTime() - new
                                    Date(value).getTime()) / 1000 / 60 / 60) < 24 ? Math.floor((new Date().getTime() - new
                                        Date(value).getTime()) / 1000 / 60 / 60) + '小时前' : Math.floor((new Date().getTime() - new
                                            Date(value).getTime()) / 1000 / 60 / 60 / 24) < 30 ? Math.floor((new Date().getTime() - new
                                                Date(value).getTime()) / 1000 / 60 / 60 / 24) + '天前' : Math.floor((new Date().getTime() - new
                                                    Date(value).getTime()) / 1000 / 60 / 60 / 24 / 30) < 12 ? Math.floor((new Date().getTime() - new
                                                        Date(value).getTime()) / 1000 / 60 / 60 / 24 / 30) + '月前' : '年-月-日'
            }
        }
    })
</script>

</html>