vue2 filter

// Vue 2 中的过滤器 (filter) 示例

// 定义一个全局过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  // 也可以在组件内定义局部过滤器
  filters: {
    reverse (value) {
      if (!value) return ''
      value = value.toString()
      return value.split('').reverse().join('')
    }
  }
})

<!-- HTML 模板 -->
<div id="app">
  <!-- 使用全局过滤器 -->
  <p>Capitalized message: {{ message | capitalize }}</p>

  <!-- 使用局部过滤器 -->
  <p>Reversed message: {{ message | reverse }}</p>
</div>

解释说明：

• 全局过滤器：通过 Vue.filter() 方法定义，可以在所有 Vue 实例中使用。
• 局部过滤器：在组件的 filters 选项中定义，仅在该组件内可用。
• 使用过滤器：在模板中使用 | 符号来应用过滤器，可以链式调用多个过滤器。