vue在方法里如何使用过滤器（在methods函数里使用filters）

最新推荐文章于 2024-09-24 16:58:58 发布

原创最新推荐文章于 2024-09-24 16:58:58 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了在Vue.js应用中，如何在methods方法内部使用预先定义的过滤器。通过`this.$options.filters['filterName'](value)`的语法，可以在方法中调用过滤器。以一个具体的例子说明，创建了一个名为'result'的过滤器，根据传入的参数返回不同的状态字符串，如'处理中'、'成功'或'失败'。在method1方法中，根据传入的数值v，更新value的值为对应的状态描述。

我们知道在模板里可以这样方便的使用vue过滤器：{{ value | filter}}，但是如果要在methods方法里也要使用这个定义好的过滤器filter，该怎么使用呢？答案是：

this.$options.filters['filter'](v)

其中，filter表示过滤器名称，例如以下method1方法中，传入数值0将给value赋值“处理中”，传入数值1将给value赋值“成功”，传入数值2将给value赋值“失败”：

 export default {
    filters: {
      result(a) {
        return a == 0
          ? '处理中'
          : a == 1
          ? '成功'
          : a == 2
          ? '失败'
      },
    },
    data() {
      return {
      value:''
      }
    },
    methods: {
       method1(v) {
        this.value = this.$options.filters['result'](v)
      },
    },
 }