前端基础之《Vue（10）

前端基础之《Vue（10）—过滤器》

news2025/4/25 13:18:53

一、过滤器

1、作用
用于数据处理。

2、全局过滤器
使用Vue.filter('名称', val=>{return newVal})定义。
在任何组件中都可以直接使用。

3、局部过滤器
使用选项，filters: {}定义，只能在当前组件中使用。

4、过滤器在Vue 3.0中已经淘汰了

5、过滤器只能用在{{}}和v-bind中，不支持其他指令

6、过滤器还可以链式调用{{num | f1 | f2}}，过滤器是有顺序的

二、例子代码

<html>
<head>
    <title>过滤器</title>
    <style>
        [v-cloak] {display: none;}
    </style>
</head>
<body>
    <div id="app">
        <h1 v-cloak>{{price | rmb}}</h1>
        <h1 v-cloak>{{num | myfilter}}</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <script>
        Vue.filter('rmb', val=>{
            // 做任何复杂的处理
            return '¥' + Number(val).toFixed(2)
        })

        const app = new Vue({
           data() {
            return {
                price: 99.9,
                num: 202219
            }
           },
           filters: {
            myfilter(val) {
                return '学号' + val
            }
           }
           
        })
        app.$mount('#app')

    </script>

</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2342449.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！