介绍

  • 定义：对要显示的数据进行特定格式化后显示（适用于一些简单逻辑处理）
  • 语法：
    • 注册过滤器：Vue.filter(name,callback) 或 new Vue{ fiters:{ }}
    • 使用过滤器：{{xxx | 过滤器名}}或v-bind：属性=’xxx | 过滤器名’
  • 备注
    • 过滤器也可以接受额外参数，多个过滤器也可以串联
    • 并没有改变原本的数据，是产生新的对应的数据

      局部过滤器

      1. <div id="app">
      2. <h3>{{time|filer1}}</h3>
      3. </div>
      4. <script>
      5. let vm = new Vue({
      6. el:"#app",
      7. data:{
      8.   num:1234567
      9. },
      10. filters:{
      11.   filter1(value){
      12.     //value === time
      13.   return ...
      14. }
      15. }
      16. })
      1. <div id="app">
      2. <h3 :id="time|filter1|filter2"></h3>
      3. </div>
      4. <script>
      5. let vm = new Vue({
      6. el:"#app",
      7. data:{
      8.   num:1234567
      9. },
      10. filters:{
      11.   filter1(value){
      12.     //value === time
      13.   return ...
      14. },
      15. filter2(value){
      16.      //value === filter1的返回值
      17.     return ...
      18. }
      19. }
      20. })

      全局过滤器

      1. Vue.filter('myfilter',function(value){
      2. return ...
      3. })