Vue.js过滤器使用方法及Vue 2中capitalize过滤器报错解决

咱们先拆解下你代码里的核心问题，再一步步修正：

1. 过滤器的使用位置完全错了 #

你把| capitalize加在了v-for="item in items"的数组items后面，这不符合过滤器的使用逻辑——过滤器是用来处理单个数据值的，没法直接对整个数组生效。你应该把它用在需要格式化的单个字段上，比如item.first。

2. 多余的无效代码 #

你在export default里写了vinput: ''，这个字段没有任何意义，建议删掉，避免混淆。

修正后的完整代码（用Vue 2内置capitalize过滤器） #

Vue 2自带内置的capitalize过滤器，它会把字符串首字母转为大写，其余字母转为小写。直接调整使用位置即可：

<template>
  <div class="test">
    <h1>{{ title }}</h1>
    <ul>
      <!-- 把过滤器应用到单个字段item.first上 -->
      <li v-for="item in items" :key="item.first">
        {{ item.first | capitalize }}, {{ item.last }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      title: 'Hello',
      items: [
        { first: 'John0', last: 'Doe' },
        { first: 'paul', last: 'smith' }
      ]
    }
  }
}
</script>

自定义capitalize过滤器（如果需要更灵活的逻辑） #

如果内置过滤器的行为不符合你的需求（比如你想保留原字符串除首字母外的大小写），可以局部注册自定义过滤器：

<template>
  <div class="test">
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.first">
        {{ item.first | customCapitalize }}, {{ item.last }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      title: 'Hello',
      items: [
        { first: 'John0', last: 'Doe' },
        { first: 'paUl', last: 'Smith' }
      ]
    }
  },
  // 局部注册自定义过滤器
  filters: {
    customCapitalize(value) {
      if (!value) return ''
      // 仅将首字母转为大写，其余字符保持原样
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}
</script>

额外提醒 #

Vue 3已经移除了内置过滤器，也不再支持|语法的过滤器，但你用的是Vue 2，完全可以按上面的方式使用。

内容的提问来源于stack exchange，提问作者Павел Шиляев