VUE学习笔记--过滤器-阿里云开发者社区

VUE学习笔记--过滤器

2023-08-04 62

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： VUE学习笔记--过滤器

过滤器

过滤器实例

将英文字符串的第一个字母转为大写

代码

<!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>
    <div id="app">
        <p>{{ massage | capi }}</p>
        <p></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                massage: 'hello world'
            },
            filters: {
                capi(val) {
                    const first = val.charAt(0).toUpperCase();
                    const other = val.slice(1);
                    return first+other;
                }
            }
        })
    </script>
</body>
</html>

私有过滤器和全局过滤器

全局过滤器：

Vue.filter('capi', function(val){
            const first = val.charAt(0).toUpperCase();
            const other = val.slice(1);
            return first+other;
        })

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.filter('capi', function(val){
            const first = val.charAt(0).toUpperCase();
            const other = val.slice(1);
            return first+other;
        })
        const vm = new Vue({
            el: "#app",
            data: {
                massage: 'hello world'
            },
            filters: {
                capi(val) {
                    const first = val.charAt(0).toUpperCase();
                    const other = val.slice(1);
                    return first+other;
                }
            }
        })
    </script>

过滤器注意点

1.过滤器函数必须写到filters节点之下

2.过滤器的本质为函数

3.过滤器中一定要有一个返回值

4.在过滤器的形参中就可以获得管道符前面待处理的那个值

5.如果全局过滤器和私有过滤器的名字一致，按照就近原则

时间格式化

代码

<!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>
    <div id="app">
        <p>{{ massage | capi }}</p>
        <p>{{ time | dateFormat }}</p>
    </div>
    <!-- CDN example (unpkg) -->
    <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.filter('capi', function(val){
            const first = val.charAt(0).toUpperCase();
            const other = val.slice(1);
            return first+other;
        })
        Vue.filter('dateFormat', function(time){
            const dateStr = dayjs(time).format("YYYY--MM--DD  HH:mm:ss");
            return dateStr;
        })
        const vm = new Vue({
            el: "#app",
            data: {
                massage: 'hello world',
                time: new Date()
            },
            filters: {
                capi(val) {
                    const first = val.charAt(0).toUpperCase();
                    const other = val.slice(1);
                    return first+other;
                }
            }
        })
    </script>
</body>
</html>