VueJS技术疑问：为何v-model无法与getUppercase过滤器配合使用？

这个问题核心在于v-model和过滤器的设计定位完全不同，咱们一步步拆解原因，再给你解决办法：

首先，v-model是Vue提供的双向绑定语法糖，它同时做了两件事：把数据绑定到输入框的value属性（从数据到视图），还监听输入框的input事件把用户输入同步回数据（从视图到数据）。而Vue的过滤器呢？它是专门用来格式化输出内容的——比如在插值{{ }}里把文本转大写、格式化日期，本质是单向的“数据转视图”处理，完全没考虑反向的“视图转数据”逻辑，所以根本没法和需要双向数据流的v-model配合使用。

另外看你的代码，还有两个小bug得先修正：

• 过滤器getUppercase里写了this.obj，这是错的：过滤器的参数是传入的obj，应该直接用obj.toUpperCase()，而且Vue 2的过滤器里不能用this访问组件实例，它是无状态的函数。
• filteredFruits里用item.match(vm.filterText)，如果filterText是空字符串会匹配所有项，而且没统一大小写，导致输入小写字母匹配不到大写的水果名。

接下来给你两种常用的实现思路，都能达到“输入自动转大写，同时过滤水果列表”的效果：

方案一：用计算属性实现双向绑定 #

计算属性支持get和set方法，刚好能处理双向的转换逻辑，这也是Vue官方推荐的替代方案：

<template>
  <div class="wrapper">
    检查水果是否存在:
    <input v-model="filteredText">
    <ul v-for="fruit in filteredFruits" :key="fruit">
      <li> {{ fruit }} </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "filterText",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      filterText: "",
      fruits: ["Apple", "Banana", "Orange", "PineApple", 'Pina Colada']
    };
  },
  computed: {
    filteredText: {
      get() {
        // 读取数据时转成大写，让输入框始终显示大写文本
        return this.filterText.toUpperCase();
      },
      set(inputVal) {
        // 用户输入时，把值转大写后同步回原数据
        this.filterText = inputVal.toUpperCase();
      }
    },
    filteredFruits() {
      // 统一转成大写后判断包含关系，避免大小写不匹配
      return this.fruits.filter(fruit => 
        fruit.toUpperCase().includes(this.filterText)
      );
    }
  }
};
</script>

方案二：监听input事件手动处理 #

如果你不想用计算属性，也可以手动拆解v-model的逻辑，用:value绑定显示值，@input处理输入转换：

<template>
  <div class="wrapper">
    检查水果是否存在:
    <input :value="filterText" @input="handleInput">
    <ul v-for="fruit in filteredFruits" :key="fruit">
      <li> {{ fruit }} </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "filterText",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      filterText: "",
      fruits: ["Apple", "Banana", "Orange", "PineApple", 'Pina Colada']
    };
  },
  methods: {
    handleInput(e) {
      // 把用户输入的内容转大写后更新到filterText
      this.filterText = e.target.value.toUpperCase();
    }
  },
  computed: {
    filteredFruits() {
      return this.fruits.filter(fruit => 
        fruit.toUpperCase().includes(this.filterText)
      );
    }
  }
};
</script>

最后再补个知识点 #

Vue 2里过滤器只能用在插值表达式和v-bind属性里，比如{{ filterText | getUppercase }}或者<span :title="filterText | getUppercase">，但绝对不能用在v-model里——因为v-model需要双向数据流，而过滤器只负责单向的输出格式化。

内容的提问来源于stack exchange，提问作者b Tech