Vue如何定义一个过滤器

为了认识你

2021-08-29 187 阅读1分钟

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 `v-bind` 表达式，过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

（一）定义全局过滤器

定义在实例之前

<body>
  <div id="diva">
     <!--使用过滤器 就是把过滤器在要过滤的数据后面使用管道符进行调用 -->
     {{text|filter1}}
  </div>
  <script>
     //全局过滤器的定义方法
     //创建在实例之前
     //Vue.filter("过滤器的名称",function(val){
          return 处理后的数据
     })
     
     //全局过滤器
     Vue.filter('filter1',function(val){
        return val + "元"
     })
     new Vue({
        el:'#diva',
        data:'100'
     })
  </script>
</body>

(二)定义局部过滤器

  <body>
     <div id="diva">
        {{text|filter}}
     </div>
     <script>
        new Vue({
           el:"#diva",
           data:{
              text:"",100
           },
           //局部过滤器
           filters:{
              filter1(val){
                 return "<"+val + ">"
              }
           }
        })
     </script>
  
  </body>