过滤器

PPG007 ... 2021-12-25 Less than 1 minute

# 过滤器

通过管道符 | 使用：

v-bind 和插值语法可以使用过滤器。
v-model 不可以使用过滤器。
多个过滤器可以串联。
过滤器并没有修改源数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head>
<body>

    <div id="root">
        <h2>Time</h2>
        <!-- 计算属性实现 -->
        <h2>{{fmtTime}}</h2>
        <!-- methods实现 -->
        <h2>{{getFormatTime()}}</h2>
        <!-- 过滤器实现 -->
        <h2>{{time|timeFormater('YYYY年MM月DD日')}}</h2>
        <h2>{{time|timeFormater('YYYY年MM月DD日')|mySlice}}</h2>
    </div>
    <script>
        Vue.filter('mySlice',function(val){
            return val.slice(0,4);
        })
        const vm=new Vue({
            el:'#root',
            data() {
                return {
                    time:1627296335622
                }
            },
            computed:{
                fmtTime(){
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
                }
            },
            methods: {
                getFormatTime(){
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
                }
            },
            filters:{
                // 局部过滤器
                timeFormater(val,formatStr='YYYY年MM月DD日 HH:mm:ss'){
                    return dayjs(val).format(formatStr);
                }
            }
        })
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

列表渲染内置指令