Vue中的过滤器——filter()

在 Vue.js 中，过滤器（Filters）是一种用于在文本数据被渲染到 DOM 之前对其进行格式化的功能。它们可以用在两个地方：mustache 插值和 v-bind 表达式。然而，请注意，从 Vue 2.x 开始，过滤器主要用于文本插值，并且在 Vue 3.x 中，过滤器已经被移除，因为它们的功能可以通过计算属性或方法来实现。

Vue 2.x 中的过滤器

在 Vue 2.x 中，你可以定义全局或局部过滤器。

全局过滤器

可以使用 Vue.filter() 方法来定义全局过滤器：

Vue.filter('uppercase', function(value) {  
  if (!value) return ''  
  value = value.toString()  
  return value.toUpperCase()  
})

 然后在模板中使用它：

<p>{{ message | uppercase }}</p>

局部过滤器 

 在组件的选项中定义局部过滤器：

new Vue({  
  el: '#app',  
  data: {  
    message: 'hello world'  
  },  
  filters: {  
    uppercase: function(value) {  
      if (!value) return ''  
      value = value.toString()  
      return value.toUpperCase()  
    }  
  }  
})

 Vue 3.x 中的替代方案

在 Vue 3.x 中，由于过滤器的移除，你可以使用计算属性（computed properties）或方法来达到类似的效果。

使用计算属性

export default {  
  data() {  
    return {  
      message: 'hello world'  
    }  
  },  
  computed: {  
    uppercaseMessage() {  
      return this.message.toUpperCase();  
    }  
  }  
}

然后在模板中使用计算属性：

<p>{{ uppercaseMessage }}</p>

使用方法 

如果你需要在模板中多次进行相同的操作，并且不希望使用计算属性（因为它会创建一个响应式依赖），你可以使用方法： 

export default {  
  data() {  
    return {  
      message: 'hello world'  
    }  
  },  
  methods: {  
    toUpperCase(value) {  
      return value.toUpperCase();  
    }  
  }  
}

然后在模板中调用该方法： 

<p>{{ toUpperCase(message) }}</p>