第十五课 Vue中的过滤器

Vue中的过滤器

Vue2.0以后废除了原始的过滤器,我们可以通过自定义过滤器去进行过滤

自定义过滤器通过属性filter去拓展

基础示例:

    <div id="app">
        <h1>{{val | test}}</h1>
    </div>
    <script>
            new Vue({
                el: '#app',
                data: {
                    val: 10
                },
                filters: {
                    test(val){
                         return val > 100? '当前值大于100': '当前值不大于100'
                    }
                }
            })
    </script>  

自定义单向过滤器

1) 通过构造函数构建过滤器

大小写过滤

    <div id="app">
        <input type="text" v-model="val">
        原始输入内容:<h1>{{val}}</h1>
        将大写英文转成小写:<h1>{{val | lowCase}}</h1>
        将小写英文转换成大写:<h1>{{val | upCase}}</h1>
    </div>
    <script>
            new Vue({
                el: '#app',
                data: {
                    val: 'Hello World !'
                },
                filters: {
                    lowCase(val){
                         return val.toLowerCase();
                    },
                    upCase(val){
                         return val.toUpperCase();
                    }
                }
            })
    </script> 

2)通过外部单独拓展过滤器

<div id="app">
    <input type="text" v-model="val">
    原始输入内容:<h1>{{val}}</h1>
    将大写英文转成小写:<h1>{{val | lowCase}}</h1>
    将小写英文转换成大写:<h1>{{val | upCase}}</h1>
</div>
<script>
        Vue.filter('lowCase', function(val){
            return val.toLowerCase();
        });

        Vue.filter('upCase', function(val){
            return val.toUpperCase();
        })

        new Vue({
            el: '#app',
            data: {
                val: 'Hello World !'
            }
        })
</script>
  1. 关于参数值传递

fiter过滤器默认值第一位是当前的过滤参数,如果在过滤器传入参数,直接在参数集中传入其他参数即可

<div id="app">
    原始输入内容:<h1>{{val | deal('Hello ', 'World !')}}</h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            val: 'Bob'
        },
        filters: {
            deal(val, before, after){
                console.log(val);
                console.log(before);
                console.log(after);
                return before + val + after;
            }
        }
    })
</script> 
相关推荐
懒大王爱吃狼39 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果7 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript