14-基础-过滤器-全局过滤器

转载于 2019-05-28 21:17:00 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/divtab/p/10940326.html

文章标签：

#javascript #ViewUI

此博客为转载内容，转载自https://www.cnblogs.com/divtab/p/10940326.html ，涉及JavaScript相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id="a">
        <p>处理前</p>
        {{str}}
        <p>处理后</p>
        <!-- 让过滤器toUpper去处理str数据并且把处理结果返回 -->
        {{str | toUpper}}
    </div>
    <script src='./vue.js'></script>
    <script>
        //  需求: data中msg的值"abc" 希望"abc"渲染的结果Abc
        // 全局
        // 1. 定义过滤器Vue.filter(名字,函数(v){})
        // 2. 写功能
        // 3. 使用{{msg |过滤器}}

        Vue.filter('toUpper', function (v) {
            return v.charAt(0).toUpperCase() + v.substr(1);
        });
        new Vue({
            el: '#a',
            data: { str: 'abcde' }
        });
    </script>


</body>

</html>