Vue.js中过滤后的列表无法显示问题求助

嘿，我一眼就揪出问题所在啦！你用的是Vue 1.x时代的管道符（|）语法，给v-for的数据源加过滤器，但Vue 2及更高版本已经移除了这种用法——管道符现在只能用在插值表达式（{{ }}）里，不能直接处理v-for要遍历的数组，这就是过滤后列表没显示的核心原因。

下面给你两种靠谱的解决方案：

方案一：使用计算属性（推荐，性能更优） #

计算属性会自动缓存结果，只有依赖的myList变化时才会重新计算，非常适合这种固定逻辑的过滤场景：

修改后的HTML代码 #

<div class="container">
  <ul>
    <li v-for="item in filteredList" :key="item.name">
      {{ item.name }}
    </li>
  </ul>
</div>

修改后的JS代码 #

new Vue({
  el: '.container',
  data: {
    message: 'Hello world',
    myList: [
      { name: 'item1', value: 1 },
      { name: 'item2', value: 2 },
      { name: 'item3', value: 3 }
    ]
  },
  computed: {
    filteredList() {
      // 把原来的过滤器逻辑移到这里
      return this.myList.filter(item => item.value >= 2);
    }
  }
});

方案二：使用方法（适合需要动态传参的场景） #

如果之后需要根据不同条件动态调整过滤规则，用方法会更灵活：

修改后的HTML代码 #

<div class="container">
  <ul>
    <li v-for="item in filterMyList(myList)" :key="item.name">
      {{ item.name }}
    </li>
  </ul>
</div>

修改后的JS代码 #

new Vue({
  el: '.container',
  data: {
    message: 'Hello world',
    myList: [
      { name: 'item1', value: 1 },
      { name: 'item2', value: 2 },
      { name: 'item3', value: 3 }
    ]
  },
  methods: {
    filterMyList(list) {
      return list.filter(item => item.value >= 2);
    }
  }
});

另外提一句，Vue 2+里的v-for建议加上:key绑定，帮助Vue更高效地更新DOM，这也是官方推荐的最佳实践哦～

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