vue的filters是纯函数，没有this

最新推荐文章于 2024-05-22 18:42:01 发布

维多利亚_

最新推荐文章于 2024-05-22 18:42:01 发布

阅读量437

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/l13640698113/article/details/108986170

本文介绍了Vue.js中过滤器的概念及其实现方式。过滤器作为纯函数，在每次调用时根据相同的输入参数返回相同的结果，并避免产生任何副作用。文章通过一个具体的例子展示了如何使用过滤器来处理图片源路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue的filters是纯函数，没有this

纯函数的定义是：

如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。

该函数执行过程不会产生任何可观察的副作用。副作用来自，但不限于：
进行一个 HTTP 请求，
Mutating data，
输出数据到屏幕或者控制台，
DOM 查询/操作，
Math.random()，
获取的当前时间。

//url有可能是完整路径-url: "https://cms-bucket.ws.126.net/2019/09/17/0d8d568a0bf94cb29201e6b4892ca653.png?imageView&thumbnail=234y146&quality=45&interlace=1&enlarge=1&type=webp"
//缺少基准了路径-url: "/uploads/image/IMG1602235525065.jpeg"
//因此缺少基准路径的需要补上基准路径才能正常显示
<img class="pic" :src="postdata.cover[0].url | changesrc" alt="" />

//过滤器
filters: {
    changesrc: function (oldsrc) {
      const reg = /^http/;
      if (reg.test(oldsrc)) {
        return oldsrc;
      } else {
      //不能写成 return this.$axios.defaults.baseURL + oldsrc;
        return "http://157.122.54.189:9083" + oldsrc;
      }
    },
  },