如何在Vue循环中跳过指定值（如"Three"）？

1. 修复语法错误（快速解决） #

你写的v-for语句缺少闭合括号，这是导致语法错误的直接原因。把：

<li v-for="(route in routes" v-if="route.name !== 'Three'">

修改为：

<li v-for="(route in routes)" v-if="route.name !== 'Three'">

修改后既能避免渲染空<li>标签，也不会再出现语法错误。

2. 更优方案：用计算属性提前过滤数据 #

在模板中给v-for搭配v-if虽然能解决问题，但每次渲染都要执行判断逻辑，性能不如提前过滤数据。你可以修改计算属性，直接返回过滤后的数组：

<script>
  const routes = [
    {name: 'One', value: 24},
    {name: 'Two', value: 25},
    {name: 'Three', value: 26},
    {name: 'Four', value: 34},
  ]
  export default {
    name: 'App',
    computed: {
      filteredRoutes(){
        return routes.filter(item => item.name !== 'Three');
      }
    },
  } 
</script>

<template>  
  <div id="app">
    <div class="movies">
      <h2>Which movie?</h2>      
      <ul>
        <li v-for="route in filteredRoutes" :key="route.name">
          <span>{{ route.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

这种方式下模板代码更简洁，而且计算属性会缓存过滤结果，只有原数组发生变化时才会重新计算，性能更优。另外记得给v-for添加:key，这是Vue的最佳实践，能帮助框架高效更新DOM。

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