vue过滤器如何使用

Vue.js过滤器实战

最新推荐文章于 2024-07-04 10:07:27 发布

原创最新推荐文章于 2024-07-04 10:07:27 发布 · 421 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #过滤器

本文详细介绍了Vue.js中过滤器的使用方法，包括如何自定义过滤器进行文本格式化，对比了直接在方法中处理数据与使用过滤器的不同场景及优势。

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部。

作用：对内容(数据)进行过滤(二次操作/二次处理)

我给大家模拟一个场景

<body>
    <div id="app">
        <li v-for="item of items">
            <span> 名称：{{item.name}} </span>
            <span> - </span>
            <span> 价格：{{rmb(item.price,'$')}} </span>
        </li>
    </div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                items:[
                    {id:1,name:"iphone",price:"88888"},
                    {id:2,name:"ipad",price:"66666"},
                    {id:3,name:"iMac",price:"199999"}
                ]
            },
            methods:{
                rmb(price,flag){
                    return `${flag}` + (price / 100).toFixed(2);
                }
            }
        })
    </script>
</body>

浏览器反馈
在这里插入图片描述
上边是一个没有使用过滤器的，我们先再看一下使用过滤器的

<body>
    <div id="app">
        <li v-for="item of items">
            <span> 名称：{{item.name}} </span>
            <span> - </span>
            <span> 价格：{{item.price | rmb("$")}} </span>
        </li>
    </div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        // Vue.filter("过滤器名称",过滤的方式)
        Vue.filter("rmb", function(price, flag){
            return `${flag}` + (price / 100).toFixed(2);
        })

        let app = new Vue({
            el: "#app",
            data: {
                items: [
                    { id: 1, name: "iphone", price: "88888" },
                    { id: 2, name: "ipad", price: "66666" },
                    { id: 3, name: "iMac", price: "199999" }
                ]
            }
        })
    </script>
</body>

在这里插入图片描述
我们可以看出，页面效果是完全一样的

过滤器的使用：很类似于管道流

管道流：获取到的第一个值，以参数（第一位）的形式传递给第二个

<span> 价格：{{item.price | rmb("$")}} </span>

是否使用过滤器：
取决于你是否需要多次使用，如果说，如果只是为了单纯的实现上述效果，没有后期需求，那上述两种方法的使用都可以，但是如果后期需求较多，那过滤器的优势就体现出来了

r4(r3(r2(r1(ppt,1),2),3),4)	// 多次使用函数
r4(4) | r3(3) | r2(2) | r1(1) // 多次使用过滤器