如何在Vue的v-for循环中仅输出第一个获胜者？

嘿，我来帮你搞定这个需求！你现在的代码会把所有is_winner为winner的用户都渲染出来，但你只需要显示任意一个获胜者对吧？这里有两个实用的方案：

方案一：用计算属性提前获取第一个获胜者（推荐） #

这种方法更高效，因为我们直接从用户列表里定位到第一个符合条件的获胜者，不用在模板里循环遍历所有用户。

修改你的Vue实例代码，添加一个计算属性：

app: new Vue({
  el: '#app',
  data: {
    users: [{
      "name": "Mike",
      "is_winner": "winner"
    }, {
      "name": "Piter",
      "is_winner": "fail"
    }, {
      "name": "Jow",
      "is_winner": "fail"
    }, {
      "name": "John",
      "is_winner": "winner"
    }]
  },
  computed: {
    firstWinner() {
      // 找到第一个is_winner为winner的用户，找不到就返回空对象避免报错
      return this.users.find(user => user.is_winner === 'winner') || {}
    }
  }
})

然后修改模板，直接渲染这个计算属性的结果即可，不用再写v-for：

<div id="app">
  <p v-if="firstWinner.name">{{firstWinner.name}}</p>
</div>

这样就只会显示第一个获胜者的名字，完全符合你的需求，而且代码简洁清晰，性能也更好。

方案二：在v-for里添加额外条件（仅当必须用v-for时可选） #

如果你坚持要用v-for循环，那可以给循环加上索引判断，只渲染第一个符合条件的用户：

<div id="app">
  <div v-for="(user, index) in users" v-if="user.is_winner == 'winner' && index === 0">
    <p>{{user.name}}</p>
  </div>
</div>

不过要注意，这个方案有局限性：如果列表里第一个用户不是获胜者，那页面就不会显示任何内容，所以不如方案一可靠。

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