16.全局过滤器的基本使用.html

最新推荐文章于 2024-08-19 19:15:13 发布

这瓜保熟么

最新推荐文章于 2024-08-19 19:15:13 发布

阅读量308

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/luzhensmart/article/details/84204930

版权

vue 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<script src="./lib/vue.min.js"></script>

</head>

<body>

     <div id="app">
          <p>{{msg}}</p>
          <!-- 将单纯换成邪恶 用过滤器 -->
          <p>{{msg | msgFormat}}</p>
          <!-- 将单纯换成 任意参数 用过滤器 -->
          <p>{{msg | msgFormat2('疯狂')}}</p>
           <!-- 过滤器 可以传递多个参数-->
           <p>{{msg | msgFormat3('--疯狂','接着疯狂','再接着疯狂--')}}</p>
            <!-- 连着多个过滤器的使用 过滤器是按照顺序执行的-->
          <p>{{msg | msgFormat1 | msgFormat4}}</p>
     </div>


     <script>
        //注意 这是全局过滤器 如果再有<div id="app2"></div> 和一个vue2对象 那么过滤器也是生效的

         //定义一个过滤器 名字叫msgFormat
         Vue.filter('msgFormat',function(msg){
             //第一个参数可以是正则表达式 替换所有的单纯为邪恶
             return msg.replace(/单纯/g,'邪恶');
         });

          Vue.filter('msgFormat2',function(msg,arg){
             //第一个参数可以是正则表达式 替换所有的单纯为邪恶
             return msg.replace(/单纯/g,arg);
         });

         Vue.filter('msgFormat3',function(msg,arg1,arg2,arg3){
             //第一个参数可以是正则表达式 替换所有的单纯为邪恶
             return msg.replace(/单纯/g,arg1+arg2+arg3);
         });

         Vue.filter('msgFormat4',function(msg){
             //第一个参数可以是正则表达式 替换所有的单纯为邪恶
             return msg + "====";
         });

        var vm = new Vue({
             el : '#app',
             data : {
             msg : '曾经我也是一个单纯的少年,单纯的我傻傻的问:谁才是世界上最单纯的男人?'
            }
        }) 

     </script>

</body>

</html>