Vue的学习之路十二：过滤器

最新推荐文章于 2024-05-29 17:10:32 发布

亥虫

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量3.3k

点赞数

分类专栏： # Vue 文章标签： vue javascript vue.js html5

本文链接：https://blog.csdn.net/weixin_39020133/article/details/106332352

版权

Vue 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

<body>
    <div id="app">
      <p>{{ msg | msgFormat('疯狂', '123') | test }}</p>
    </div>

    <div id="app2">
      <p>{{ msg | msgFormat('疯狂', '123') | test }}</p>
    </div>


    <script>
      // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
      // 全局过滤器，所有的Vue实例都能共享
      Vue.filter('msgFormat', function (msg, data, data2) {
        return msg.replace(/单纯/g, data + data2)
      })

      Vue.filter('test', function(msg){
        return msg + "========="
      })

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

      // 如何自定义一个私有的过滤器
      var vm2 = new Vue({
        el: '#app2',
        data: {
          msg: '曾经，我也是个单纯的少年，单纯的问谁是世界上最单纯的男人',
        },
        methods: {},
        filters: {
          // 定义私有过滤器，过滤器有两个条件，【过滤器名称和处理函数】
          // 过滤器调用的时候，采用的就是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器
          msgFormat: function(msg){
            return msg.replace(/单纯/g, '幼稚')
          }
        }
      })
    </script>
  </body>

全局过滤器语法：Vue.filter('过滤器的名称', function(data){})，第一个参数永远都是过滤器管道符前面传递过来的数据。
可以设置多个参数由前台传入，Vue.filter('msgFormat', function (msg, data, data2)
全局过滤器，所有的Vue实例都能共享
可以使用多个过滤器
在Vue实例中，使用filters属性定义私有过滤器，定义私有过滤器有两个条件，【过滤器名称和处理函数】
过滤器调用的时候，采用的就是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器

亥虫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习之路十二：过滤器

<body> <div id="app"> <p>{{ msg | msgFormat('疯狂', '123') | test }}</p> </div> <div id="app2"> <p>{{ msg | msgFormat('疯狂', '123') | test }}</p> </div> <script>
复制链接

扫一扫