当前位置：首页 > VUE

vue实现信息列表

2026-01-18 20:57:24VUE

Vue 实现信息列表的方法

使用 `v-for` 渲染列表

通过 Vue 的 v-for 指令可以轻松渲染动态列表数据。在模板中使用 v-for 遍历数组，并为每个项生成对应的 DOM 元素。

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

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

动态加载远程数据

结合 axios 或 fetch 从后端 API 获取数据，并在 Vue 组件的 created 或 mounted 钩子中加载数据。

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    }
  },
  async created() {
    try {
      const response = await axios.get('https://api.example.com/items');
      this.items = response.data;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}
</script>

添加分页功能

结合分页逻辑，实现数据的分段加载。通常需要后端支持分页参数（如 page 和 pageSize）。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
    <button @click="prevPage" :disabled="page === 1">Previous</button>
    <span>Page {{ page }}</span>
    <button @click="nextPage">Next</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      page: 1,
      pageSize: 10
    }
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('https://api.example.com/items', {
          params: { page: this.page, pageSize: this.pageSize }
        });
        this.items = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    prevPage() {
      if (this.page > 1) {
        this.page--;
        this.fetchData();
      }
    },
    nextPage() {
      this.page++;
      this.fetchData();
    }
  },
  created() {
    this.fetchData();
  }
}
</script>

使用组件化拆分

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

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

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

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

添加搜索和过滤功能

通过计算属性或方法实现列表的搜索和过滤功能。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, title: 'Apple' },
        { id: 2, title: 'Banana' },
        { id: 3, title: 'Orange' }
      ],
      searchQuery: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.title.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
}
</script>

使用 Vuex 管理状态

对于复杂应用，可以使用 Vuex 集中管理列表数据的状态。

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

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['items'])
  },
  methods: {
    ...mapActions(['fetchItems'])
  },
  created() {
    this.fetchItems();
  }
}
</script>