当前位置：首页 > VUE

vue实现list

2026-01-13 00:29:37VUE

Vue 实现列表（List）的常用方法

使用 `v-for` 指令渲染列表

在 Vue 中，v-for 是渲染列表的核心指令。通过遍历数组或对象，动态生成 DOM 元素。

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

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

动态绑定列表项属性

可以为列表项动态绑定属性或样式，实现交互效果。

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

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

使用计算属性过滤列表

通过计算属性对列表数据进行过滤或排序，实现动态更新。

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { name: 'Apple' },
        { name: 'Banana' },
        { name: 'Cherry' }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

使用 Vue 组件封装列表项

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

<template>
  <ul>
    <ListItem 
      v-for="(item, index) in items" 
      :key="index"
      :item="item"
      @delete="handleDelete(index)"
    />
  </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(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>

列表分页实现

通过分页逻辑控制列表的显示范围，优化性能。

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

<script>
export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 5,
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        // ...更多数据
      ]
    };
  },
  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>

拖拽排序列表

通过第三方库（如 vuedraggable）实现列表拖拽排序功能。

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

<script>
import draggable from 'vuedraggable';

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