当前位置：首页 > VUE

vue实现列表页

2026-01-15 23:03:49VUE

Vue 实现列表页的方法

数据绑定与渲染

使用 v-for 指令动态渲染列表数据，结合 :key 确保渲染性能。示例代码：

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

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

分页功能实现

通过计算属性实现分页逻辑，结合 v-model 绑定当前页码：

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

<script>
export default {
  data() {
    return {
      listData: [...], // 原始数据
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      return this.listData.slice(start, start + this.itemsPerPage)
    },
    totalPages() {
      return Math.ceil(this.listData.length / this.itemsPerPage)
    }
  }
}
</script>

搜索过滤功能

通过计算属性实现搜索过滤，结合 v-model 绑定搜索关键词：

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

<script>
export default {
  data() {
    return {
      listData: [...],
      searchQuery: ''
    }
  },
  computed: {
    filteredList() {
      return this.listData.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

异步数据加载

使用 axios 或 fetch 从 API 获取列表数据：

<script>
import axios from 'axios'

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

列表项交互

为列表项添加点击事件处理：

<template>
  <ul>
    <li 
      v-for="item in listData" 
      :key="item.id"
      @click="handleItemClick(item)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    handleItemClick(item) {
      console.log('Clicked:', item)
      // 可以跳转到详情页或执行其他操作
    }
  }
}
</script>

性能优化

对于大型列表，使用 vue-virtual-scroller 实现虚拟滚动：

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

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

export default {
  components: { RecycleScroller }
}
</script>

vue实现列表页