vue实现列表显示

Vue 实现列表显示的方法

在 Vue 中实现列表显示通常使用 v-for 指令，结合数组或对象数据渲染动态列表。以下是几种常见的实现方式。

基本列表渲染

通过 v-for 指令遍历数组，动态生成列表项。假设有一个数据数组 items，可以在模板中直接渲染：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

带索引的列表渲染

如果需要获取当前项的索引，可以在 v-for 中额外添加第二个参数：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index + 1 }}. {{ item.name }}
    </li>
  </ul>
</template>

遍历对象属性

v-for 也可以遍历对象的属性，语法为 (value, key, index)：

<template>
  <ul>
    <li v-for="(value, key) in user" :key="key">
      {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 30,
        email: 'john@example.com'
      }
    };
  }
};
</script>

使用计算属性过滤列表

如果需要对列表数据进行过滤或排序，可以使用计算属性：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', category: 'fruit' },
        { id: 2, name: 'Carrot', category: 'vegetable' },
        { id: 3, name: 'Banana', category: 'fruit' }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.category === 'fruit');
    }
  }
};
</script>

动态绑定样式或类

可以为列表项动态绑定样式或类，根据数据状态变化：

<template>
  <ul>
    <li 
      v-for="item in items" 
      :key="item.id" 
      :class="{ 'active': item.isActive }"
      @click="toggleActive(item)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', isActive: false },
        { id: 2, name: 'Item 2', isActive: false },
        { id: 3, name: 'Item 3', isActive: false }
      ]
    };
  },
  methods: {
    toggleActive(item) {
      item.isActive = !item.isActive;
    }
  }
};
</script>

使用组件渲染列表

如果列表项结构复杂，可以封装为子组件：

<template>
  <ul>
    <ListItem 
      v-for="item in items" 
      :key="item.id" 
      :item="item"
      @delete="handleDelete"
    />
  </ul>
</template>

<script>
import ListItem from './ListItem.vue';

export default {
  components: { ListItem },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    handleDelete(id) {
      this.items = this.items.filter(item => item.id !== id);
    }
  }
};
</script>

分页加载列表

对于长列表，可以结合分页逻辑优化性能：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
    <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 100 }, (_, i) => ({ id: i + 1, name: `Item ${i + 1}` })),
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    },
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.items.slice(start, end);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    }
  }
};
</script>

以上方法涵盖了 Vue 中实现列表显示的主要场景，可根据实际需求选择或组合使用。