vue简单的列表实现

实现简单的 Vue 列表

在 Vue 中实现列表功能通常使用 v-for 指令。以下是一个基础的列表实现示例：

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

<script>
export default {
  data() {
    return {
      items: [
        { name: '苹果', price: 5 },
        { name: '香蕉', price: 3 },
        { name: '橙子', price: 4 }
      ]
    }
  }
}
</script>

动态添加列表项

可以通过方法动态向列表中添加新项：

<template>
  <div>
    <input v-model="newItem.name" placeholder="名称">
    <input v-model="newItem.price" placeholder="价格" type="number">
    <button @click="addItem">添加</button>

    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - {{ item.price }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: { name: '', price: 0 },
      items: []
    }
  },
  methods: {
    addItem() {
      this.items.push({...this.newItem})
      this.newItem = { name: '', price: 0 }
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

使用计算属性过滤列表

可以使用计算属性实现列表过滤功能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        '苹果', '香蕉', '橙子', '西瓜', '葡萄'
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用组件实现可复用列表

可以将列表封装为可复用组件：

<!-- ItemList.vue -->
<template>
  <ul>
    <slot v-for="(item, index) in items" :item="item" :index="index"></slot>
  </ul>
</template>

<script>
export default {
  props: ['items']
}
</script>

<!-- 使用示例 -->
<template>
  <ItemList :items="fruits">
    <template v-slot="{ item, index }">
      <li>{{ index + 1 }}. {{ item }}</li>
    </template>
  </ItemList>
</template>

<script>
import ItemList from './ItemList.vue'

export default {
  components: { ItemList },
  data() {
    return {
      fruits: ['苹果', '香蕉', '橙子']
    }
  }
}
</script>

这些示例展示了 Vue 中实现列表功能的基本方法，可以根据实际需求进行扩展和调整。