04-Vue_过滤器

Vue_过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

https://cn.vuejs.org/v2/guide/filters.html#ad

• 管道符：| 第一个命令的输出作为第二个命令的输入
• 全局：Vue.filter(name, function(data, arg1, arg2 …))
• 局部：filters: {}
• 参数解释：
  • data：被输入的值，管道符|前面的值
  • argN：作为函数参数
• 如果不需要传入参数，则可以省略括号

1.1 全局过滤器

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

全局过滤器的定义

// 过滤器的定义语法
Vue.filter('过滤器的名称', function(){})
// 过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
Vue.filter('过滤器的名称', (data)=>{
      return data + '123';
})

过滤器的使用示例

<div id="app">
    <!-- 格式化为年月日 -->
    <p>{{ new Date() | dateFormat() }}</p>
    <!-- 给金额前加上￥货币符号 -->
    <p>{{ 399 | moneyFormat }}</p> 
    <p>{{ 399 | moneyFormat('$')}}</p>
    <!-- 敏感词过滤 将其中单纯替换为**  -->
    <p>{{ '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人！' | msgFormat('--') }}</p>
</div>

Vue.filter定义全局过滤器

// 时间过滤器
Vue.filter('dateFormat', (data) => {
    const date = new Date(data)
    // 获取年月日
    const year = date.getFullYear()
    const month = date.getMonth()
    const day = date.getDate()
    return `${year} 年 ${month} 月 ${day} 日`
});
// 金额过滤器
Vue.filter('moneyFormat',(data,sign="￥")=>{
    return sign+data;
});
// 过滤单纯敏感词
 Vue.filter('msgFormat', function(data, arg = "***") {
    return data.replace(/单纯/g, arg);
});

1.2 私有过滤器

• 私有过滤器，若全局过滤器中有同名过滤器，则优先调用私有过滤器

HTML元素：

<div id="app">
    <p>{{ new Date() | dataFormat}}</p> <!-- 2021-05-05 18:26:25 -->
    <p>{{ new Date() | dataFormat('yyyy-mm-dd')}}</p> <!-- 2021-05-05  -->
</div>

私有过滤器 filters 定义方式：

// 全局过滤器
Vue.filter('dateFormat', (data) => {
    const date = new Date(data)
    // 获取年月日
    const year = date.getFullYear()
    const month = date.getMonth()
    const day = date.getDate()
    return `${year} 年 ${month} 月 ${day} 日~~`
});
var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
                dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
                    var dt = new Date(input);
                    // 获取年月日
                    var y = dt.getFullYear();
                    var m = (dt.getMonth() + 1).toString().padStart(2, '0');
                    var d = dt.getDate().toString().padStart(2, '0');
                    // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
                    // 否则，就返回  年-月-日 时：分：秒
                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`;
                    } else {
                        // 获取时分秒
                        var hh = dt.getHours().toString().padStart(2, '0');
                        var mm = dt.getMinutes().toString().padStart(2, '0');
                        var ss = dt.getSeconds().toString().padStart(2, '0');
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
                    }
                }
            }
        });
// 使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串长度；

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

1.3 串联过滤器

过滤器可以串联多个，前一个过滤器的返回值作为后一个的参数

给定一个状态 status ，值为 1、2、3
1：待付款 2：待发货 3：待收货
分别设置：红色、灰色、绿色

<style>
        .no-pay {
            background-color: #ccc;
            padding: 10px;
        }
        .no-shipments {
            background-color: orange;
            padding: 10px;
        }
        .yes-shipments {
            background-color: green;
            padding: 10px;
        }
        .take-delivery {
            background-color: red;
            padding: 10px;
        }
</style>
<div id="app">
        <span v-bind:class="1 | getStatus | setStatusColor">{{ 1 | getStatus }}</span>
        <span v-bind:class="2 | getStatus | setStatusColor">{{ 2 | getStatus }}</span>
        <span v-bind:class="3 | getStatus | setStatusColor">{{ 3 | getStatus }}</span>
        <span v-bind:class="4 | getStatus | setStatusColor">{{ 4 | getStatus }}</span>
</div>

filters定义局部过滤器

filters: {
    // 判断是什么状态
    getStatus(data) {
        switch(data) {
            case 1:
                return '待付款'
            case 2:
                return '待发货'
            case 3:
                return '已发货'
            case 4:
                return '待收货'
        }
    },
    // 设置状态文字颜色
    setStatusColor(data) {
        switch(data) {
            case '待付款':
                return 'no-pay'
            case '待发货':
                return 'no-shipments'
            case '已发货':
                return 'yes-shipments'
            case '待收货':
                return 'take-delivery'
        }
    }
}