Vue的过滤器

注意：

1.可以同时调用多个过滤器，但是一个一个执行，前面的过滤器的结果执行完成之后再执行其他的过滤器。

2.处理字符串的替换，可能会用的正则表达式，才能全局替换目标，字符串。

3.全局和私有的过滤器，名称一样时，优先调用私有的过滤器，就近原则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
      <div id="app">
          <p>{{ msg | msgFormat('到底是','真帅') | second}}</p>
          <!--可以同时调用多个过滤器，先将第一个过滤器执行完之后，再执行第二个过滤器-->
      </div>

      <script>
          Vue.filter('msgFormat',function (msg,replayWords,replayWords2) {
             return msg.replace(/帅/g,replayWords+replayWords2) 
             //replay()方法，如果第一个写的是字符串是只能运用到子浮串中的第一个，如是正则表达式可以运用到全局，后面用的是替换的字符    
              
          });
          //定义一个全局的过滤器,第一个参数定义过滤器的名字，第二个参数定义过滤的规则,同时可以调用多个过滤器
          
          Vue.filter('second',function (msg) {
             return msg + '++++++++' 
          });
          
          var vm = new Vue({
              el:'#app',
              data:{
                  msg:'陈小帅是真的帅呢，怎么能帅的如此的为所欲为呢，到头来发现，他帅是因为在梦里呢'
              },
              methods:{}
          });
      </script>
</body>
</html>

效果：

注意：

猜你喜欢