Filters过滤器 Vue2

&做梦的少年&

于 2024-05-12 10:30:00 发布

阅读量456

点赞数 5

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/dream_boy_/article/details/138655353

版权

html中调用filters:

传递一个参数: {{ price | splicingPrice1 }}
传递两个参数: {{ price | splicingPrice2('元') }}
传递三个参数: {{ price | splicingPrice3('￥','元') }}

js中调用filters:

this.$options.filters['splicingPrice1'](this.price)

filters中写法:

filters: {
    splicingPrice1(item){
        console.log('item--', item);
        return '￥' + item + '元';
    },
    splicingPrice2(item, val){
        console.log('item2--', item, 'val2--', val);
        return '￥' + item + val;
    },
    splicingPrice3(item, val, temp){
        console.log('item3--', item, 'val3--', val, 'temp3--', temp);
        return val + item + temp;
    },
},

实际效果为:

页面中:
传递一个参数: ￥50元
传递两个参数: ￥50元
传递三个参数: ￥50元
console.log控制台:
item-- 50
item2-- 50 val2-- 元
item3-- 50 val3-- ￥ temp3-- 元
item-- 50
js中调用filters的方法，endPrice-- ￥50元

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Vue2 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <div id="app">
        <h1>{{ message }}</h1>
        <div>传递一个参数: {{ price | splicingPrice1 }}</div>
        <div>传递两个参数: {{ price | splicingPrice2('元') }}</div>
        <div>传递三个参数: {{ price | splicingPrice3('￥','元') }}</div>
    </div>

    <script>        
        const vm = new Vue({
            el:"#app",
            data() {
                return {
                    message: 'Hello Vue!',
                    price: 50,
                }
            },
            mounted() {
                this.changeFilters();
            },
            filters: {
                // 接收一个参数
                splicingPrice1(item){
                    console.log('item--', item);
                    return '￥' + item + '元';
                },
                // 接收两个参数
                splicingPrice2(item, val){
                    console.log('item2--', item, 'val2--', val);
                    return '￥' + item + val;
                },
                // 接收三个参数
                splicingPrice3(item, val, temp){
                    console.log('item3--', item, 'val3--', val, 'temp3--', temp);
                    return val + item + temp;
                }
            },
            methods: {
                changeFilters(){
                    // js中调用filters的方法，生命周期/methods皆是如此
                    // this.$options.filters['过滤器的名字']('过滤器的参数')
                    let endPrice = this.$options.filters['splicingPrice1'](this.price);
                    console.log('endPrice--', endPrice);
                },
            },
        })
    </script>
</body>
</html>