vue简单的列表实现

Vue 简单的列表实现

在 Vue 中实现一个简单的列表可以通过多种方式完成，以下是几种常见的方法：

使用 v-for 指令

v-for 是 Vue 提供的用于渲染列表的指令，可以遍历数组或对象。

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

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    }
  }
}
</script>

动态绑定列表数据

可以通过方法或计算属性动态生成列表数据。

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

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.startsWith('A'))
    }
  }
}
</script>

使用组件渲染列表

可以将列表项封装为组件，提高复用性。

<template>
  <div>
    <ul>
      <ListItem 
        v-for="(item, index) in items" 
        :key="index" 
        :item="item" 
      />
    </ul>
  </div>
</template>

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

export default {
  components: { ListItem },
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    }
  }
}
</script>

添加交互功能

可以为列表项添加点击事件或其他交互功能。

<template>
  <div>
    <ul>
      <li 
        v-for="(item, index) in items" 
        :key="index" 
        @click="handleClick(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    }
  },
  methods: {
    handleClick(item) {
      console.log('Clicked:', item)
    }
  }
}
</script>

使用 Vue 3 的 Composition API

在 Vue 3 中，可以使用 ref 或 reactive 来管理列表数据。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const items = ref(['Apple', 'Banana', 'Orange'])

    const addItem = () => {
      items.value.push('New Fruit')
    }

    return { items, addItem }
  }
}
</script>

以上方法涵盖了 Vue 中实现简单列表的常见场景，可以根据具体需求选择合适的方式。