vue实现信息列表

vue实现信息列表的方法

基础列表渲染

使用v-for指令可以轻松实现列表渲染。在模板中直接遍历数组数据，动态生成列表项。

<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' }
      ]
    }
  }
}
</script>

动态数据加载

结合axios等HTTP库实现异步数据加载，适用于从后端API获取列表数据。

<template>
  <div v-if="loading">Loading...</div>
  <ul v-else>
    <li v-for="item in items" :key="item.id">
      {{ item.title }}
    </li>
  </ul>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: [],
      loading: true
    }
  },
  async created() {
    try {
      const response = await axios.get('/api/items')
      this.items = response.data
    } finally {
      this.loading = false
    }
  }
}
</script>

分页功能实现

添加分页组件和逻辑，处理大量数据时的分页展示。

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

<script>
export default {
  data() {
    return {
      items: [...], // 所有数据
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      return this.items.slice(start, start + this.itemsPerPage)
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    }
  }
}
</script>

搜索和过滤

添加搜索功能，实现对列表数据的实时过滤。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...], // 原始数据
      searchQuery: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用组件化结构

将列表项抽象为独立组件，提高代码复用性和可维护性。

<template>
  <ul>
    <list-item 
      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: [...]
    }
  },
  methods: {
    handleDelete(id) {
      this.items = this.items.filter(item => item.id !== id)
    }
  }
}
</script>

ListItem.vue组件:

<template>
  <li>
    {{ item.name }}
    <button @click="$emit('delete', item.id)">Delete</button>
  </li>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

虚拟滚动优化

对于超长列表，使用虚拟滚动技术优化性能。

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div class="item">
        {{ item.name }}
      </div>
    </template>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: { RecycleScroller },
  data() {
    return {
      items: [...] // 大量数据
    }
  }
}
</script>