vue实现列表组件

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"
      @click="selectItem(index)"
      :class="{ 'active': selectedIndex === index }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      selectedIndex: null
    }
  },
  methods: {
    selectItem(index) {
      this.selectedIndex = index
    }
  }
}
</script>

可编辑列表

实现列表项的可编辑功能，允许用户修改内容。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <input 
        v-if="item.editing"
        v-model="item.name"
        @blur="saveEdit(index)"
      >
      <span v-else @click="editItem(index)">{{ item.name }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', editing: false },
        { name: 'Item 2', editing: false },
        { name: 'Item 3', editing: false }
      ]
    }
  },
  methods: {
    editItem(index) {
      this.items[index].editing = true
    },
    saveEdit(index) {
      this.items[index].editing = false
    }
  }
}
</script>

动态加载列表

结合异步请求实现动态数据加载的列表组件。

<template>
  <div>
    <ul v-if="!loading">
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
    <div v-else>Loading...</div>
    <button @click="loadMore">Load More</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      const response = await fetch(`/api/items?page=${this.page}`)
      const newItems = await response.json()
      this.items = [...this.items, ...newItems]
      this.loading = false
    },
    loadMore() {
      this.page++
      this.fetchData()
    }
  }
}
</script>

可排序列表

实现拖拽排序功能的列表组件。

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

<script>
import Sortable from 'sortablejs'

export default {
  data() {
    return {
      items: [...],
      sortOptions: {
        onEnd: this.updateOrder
      }
    }
  },
  methods: {
    updateOrder(evt) {
      const movedItem = this.items.splice(evt.oldIndex, 1)[0]
      this.items.splice(evt.newIndex, 0, movedItem)
    }
  },
  directives: {
    sortable: {
      inserted(el, binding) {
        new Sortable(el, binding.value)
      }
    }
  }
}
</script>

这些方法涵盖了 Vue 列表组件的基本实现方式，可以根据具体需求进行组合或扩展。