vue循环创建列表只显示部分数据

如果你想要循环创建列表但只显示部分数据，你可以使用Vue的计算属性来实现。计算属性可以根据数据的状态动态计算出一个新的值，因此你可以在计算属性中对数据进行筛选，只返回你想要显示的部分数据，然后在模板中使用循环指令来渲染这部分数据。

以下是一个示例代码：

<template>
  <ul>
    <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'item 1', visible: true },
        { id: 2, name: 'item 2', visible: false },
        { id: 3, name: 'item 3', visible: true },
        { id: 4, name: 'item 4', visible: false },
        { id: 5, name: 'item 5', visible: true },
      ],
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.visible)
    },
  },
}
</script>

在这个示例中，我们有一个名为list的数组，其中每个元素都有一个名为visible的属性来指示该元素是否应该在列表中显示。我们使用计算属性filteredList来筛选只有visible属性为true的元素，并在模板中使用循环指令来渲染这些元素的名称。这样就可以只显示部分数据了