×

Vue应用:正确使用过滤器filter

作者:Web前端之家2022.09.14来源:Web前端之家浏览:292评论:0
关键词:vuejs

Vue应用:正确使用过滤器filter。

什么是vue的过滤器

过滤器可以通俗理解成是一个特殊的方法,用来加工数据的

比如枚举值可以使用过滤器:如 1 2 3 4 对应 成功 失败 进行中 已退回 比如价格后面跟个过滤器,将价格格式化成小数点两位 比如时间格式化等,又比如可以过滤聊天中的某些脏话

过滤器怎么写

<div id="app">
      <h3>过滤器基本使用</h3>
    //   <!--在双花括号中使用全局过滤器 格式:{{值 | 过滤器的名称}}-->
      <p> {{content|contentFilter}} </p>
   //    <!--在v-bind中使用全局过滤器 格式:v-bind:id="值 | 过滤器的名称"-->
      <p v-bind:id="1 | addZero">11</p>
      <h3>过滤器接收参数</h3>
      <p> {{ num1| add(num2,num3)}} </p>
</div>
Vue.filter('contentFilter', function (value) {
            //全局过滤器
            if (!value) {
                return ""
            }
            return value.toUpperCase().replace('TMD', '*不许说脏话噢*').replace('SB', '*不许说脏话噢*')
        })
         Vue.filter("addZero",function(value){
               // 如果value的值小于10则在前面添加0然后返回,否则直接返回value值
               return value<10?"0"+value:value;
           });
        new Vue({
            el: '#app',
            data: {
                content: '小伙子,TMD就是个sb',
                num1: 40,
                num2: 60,
                num3: 70,
            },
             filters: {
                //局部过滤器(本地过滤器)
                add(n1, n2, n3) {
                    return n1 + n2 + n3
                }
            }
})

演示效果:

image.png

注意:当全局过滤器和局部过滤器重名时,会采用局部过滤器。

局部过滤器优先于全局过滤器被调用

一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

注意filter方法在vue3中已被废除

vue3要精简代码,并且filter功能重复,filter能实现的功能,methods和计算属性基本上也可以实现。把filter这方面的vue源码给删掉,这样更加方便维护。

例如

使用computed实现

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快递公司:{{ item.deliverCompany }}</li>
      <!-- 使用计算属性 -->
      <li>运输状态:{{ computedText(item.expressState) }}</li>
    </ul>
  </div>
</template>
<script>
export default {
   data() {
    return {
      arr: [
        {
          deliverCompany: "京东快递",
          expressState: "1",
        },
        {
          deliverCompany: "顺丰快递",
          expressState: "2",
        },
        {
          deliverCompany: "中通快递",
          expressState: "3",
        },
        {
          deliverCompany: "邮政快递",
          expressState: "4",
        },
        {
          deliverCompany: "极兔快递",
          expressState: "5",
        },
        {
          deliverCompany: "某某快递",
          expressState: null,
        },
      ],
    };
  },
  computed: {
    computedText() {
      // 计算属性要return一个函数接收参数
      return function (state) {
        switch (state) {
          case "1":
            return "待发货";
            break;
          case "2":
            return "已发货";
            break;
          case "3":
            return "运输中";
            break;
          case "4":
            return "派件中";
            break;
          case "5":
            return "已收货";
            break;
          default:
            return "快递信息丢失";
            break;
        }
      };
    },
  },
};
</script>

使用methods实现

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快递公司:{{ item.deliverCompany }}</li>
      <!-- 使用方法 -->
      <li>运输状态:{{ methodsText(item.expressState) }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        {
          deliverCompany: "京东快递",
          expressState: "1",
        },
        {
          deliverCompany: "顺丰快递",
          expressState: "2",
        },
        {
          deliverCompany: "中通快递",
          expressState: "3",
        },
        {
          deliverCompany: "邮政快递",
          expressState: "4",
        },
        {
          deliverCompany: "极兔快递",
          expressState: "5",
        },
        {
          deliverCompany: "某某快递",
          expressState: null,
        },
      ],
    };
  },
  methods: {
    methodsText(state) {
      switch (state) {
        case "1":
          return "待发货";
          break;
        case "2":
          return "已发货";
          break;
        case "3":
          return "运输中";
          break;
        case "4":
          return "派件中";
          break;
        case "5":
          return "已收货";
          break;
        default:
          return "快递信息丢失";
          break;
      }
    },
  },
};
</script>

大家不妨去试试吧。

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuejs20220914a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2