Vue入门-自定义过滤器

不念不忘少年蓝@ 2021-09-15 13:32 457阅读 0赞

**过滤器介绍**

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

**代码参考**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>自定义过滤器</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    
    <body>
        <div id="app">
            <h1>价格: {
       {price | currency('¥',2)}}</h1>
            <p>{
       {str | capital}}</p>
        </div>
    </body>
    
    </html>
    <script>
        // 自定义全局过滤器,第二个参数是函数
        // 全局过滤器，本过滤器功能：添加货币符号，保留两位小数
        Vue.filter('currency', function (val, arg1, arg2) {
            // 输出的结果为: |前面的数字
            console.log(val, arg1, arg2);
            // toFixed()方法可把 Number 四舍五入为指定小数位数的数字。
            return arg1 + val.toFixed(arg2);
        });
        // 注册局部过滤器
        new Vue({
            el: '#app',
            data: {
                price: 12.345,
                str: 'hello'
            },
            // 局部过滤器，本过滤器功能：实现字符的首字符大写
            filters: {
                capital: function (v) {
                    // 实现效果: 首字母大写
                    // 具体做法: 字符串下标为0的字符,转化为大写;从下标为1的位置开始截取,截取后面所有的字符;最后,进行拼接.
                    return v[0].toUpperCase() + v.slice(1);
                }
            }
        });
    </script>

**效果图**

**![70][]**

[70]: /images/20210802/42f1a95e2da54283b5f6dfef47a9df03.png