过滤器的全局应用_引入过滤器做全局使用的方法-CSDN博客

本文链接：https://blog.csdn.net/Joker_L_y/article/details/103757945

全局方式应用

目标：

知道什么是全局过滤器

全局过滤器：

在new Vue()前边，直接给Vue调用filter声明的过滤器称为“全局过滤器”

全局的意思是过滤器可以供所有Vue实例使用

Vue.filter(名称, function(被处理的数据){})
var vm = new Vue()
var vm2 = new Vue()

全局和私有取舍：

理论上，多个Vue实例都需要使用的过滤器声明为全局的，只是当前Vue实例使用的过滤器声明为私有的

实际情况：私有的用的更多

注意：

全局的过滤器需要在new Vue()之前声明

应用：

声明一个全局过滤器，可以给多个Vue实例应用

<body>
  <div id="app">
    <p>{{ city }}</p>
    <p>{{ city | qian }}</p>
    <p>{{ city | hou }}</p>
    <p>{{ city | qian | hou }}</p>
  </div>
  <hr />
  <div id="app2">
    <p>{{ address }}</p>
    <p>{{ address | qian}}</p>
    <p>{{ address | hou}}</p>
  </div>

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

  <script>
    // 全局过滤器，所有的Vue实例都可以使用
    // 注意：需要在new Vue()前边设置
    // Vue.filter(名称,function(被处理数据){return xx})
    Vue.filter('hou',function(origin){
      return origin+',很冷'
    })

    var vm = new Vue({
      el:'#app',
      // 私有过滤器，只是当前"自己Vue实例"可以使用
      filters:{
        qian(origin){
          return '我喜欢'+origin
        }
      },
      data:{
        city:'北京'
      },
    });

    var vm2 = new Vue({
      el:'#app2',
      data:{
        address:'上海'
      }
    })


  </script>
</body>

注意：