Vue的过滤器

最新推荐文章于 2024-07-04 10:07:27 发布

何迟

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量146

点赞数

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82824472

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

注意：

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>

效果：

何迟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的过滤器

注意：1.可以同时调用多个过滤器，但是一个一个执行，前面的过滤器的结果执行完成之后再执行其他的过滤器。2.处理字符串的替换，可能会用的正则表达式，才能全局替换目标，字符串。3.全局和私有的过滤器，名称一样时，优先调用私有的过滤器，就近原则。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta ...
复制链接

扫一扫

专栏目录