Vue——11——过滤器

最新推荐文章于 2024-09-05 13:30:00 发布

野生小米椒

最新推荐文章于 2024-09-05 13:30:00 发布

阅读量130

点赞数

分类专栏： VUE框架

本文链接：https://blog.csdn.net/x1037490413/article/details/107102671

版权

VUE框架专栏收录该内容

33 篇文章 0 订阅

订阅专栏

过滤器只能用在插值表达式和v-bind 格式{{name | 过滤器名称}}
过滤器的定义语法

Vue.filter('过滤器的名称',function(){})

过滤器中的function,第一个参数已经被规定死了,永远都是过滤器管道符’|’,前面传递过来的数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap3.3.7.css">
</head>

<body>
    <dip id="app">
        <!-- msg这个值交给后面这个过滤器处理 -->
        <p>{{msg|msgFormat('实习','加油')|test}}</p>
    </dip>
    <script>
        // 字符串的replace方法 第一个参数可以写字符串或者正则
        // 定义一个Vue全局的过滤器，名字叫做msgFormat  里面可以传一个或者多个参数，但是在过滤器的function里添加参数
        //可以同时使用多个过滤器 
        Vue.filter('msgFormat', function (msg, arg, arg2) {
            return msg.replace(/工作/g, arg + arg2)
        })
        //第二个过滤器
        Vue.filter('test', function (msg) {
            return msg + "!!!!!"
        })
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "我想很快找到工作，这样就不用去学校了，工作使我快乐，我热爱工作"
            },
            methods: {}
        })
    </script>
</body>

</html>