前端应用_Vue_全局过滤器基本使用

最新推荐文章于 2024-05-05 22:29:46 发布

上海_彭彭

最新推荐文章于 2024-05-05 22:29:46 发布

阅读量553

点赞数

分类专栏： Vue.js 文章标签： vue filter

本文链接：https://blog.csdn.net/qq_34979346/article/details/98900602

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

这个是重点一定要记住，

过滤器有两个地方可以使用

第一在插值表达式内，例如 {{id}} ，使用方法为 {{ id | idpe}}通过管道进行处理
第二在v- bind 属性

知道了在哪使用，下边介绍如何定义一个过滤器

Vue.filter('过滤器的名称'，functon(data){})

过滤器的第一个参数已经写死了，就是管道前边的值，

下边写个实例，当p标签的文字爱情变成狗屎，

曾经有一段真挚的爱情，摆在我面前，我没有珍惜，现在后悔莫及，如果再遇到这段爱情，我绝对抓住这个爱情

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >

   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">


    </script>
</head>
<body>
<div id="pp" >
    <p >{{msg | myfilter}}</p>
   

</div>
<div>

    <script>
        Vue.filter("myfilter",function(msg){
            return msg.replace("爱情","狗屎")

        })

        var vm = new Vue(
           
            {
            el: "#pp",
            data: {
                msg: "曾经有一段真挚的爱情，摆在我面前，我没有珍惜，现在后悔莫及，如果再遇到这段爱情，我绝对抓住这个爱情"
            }
        }
        )

         
        
    </script>
</div>
</body>
</html>