vue实现文本列表

使用 v-for 渲染文本列表

在 Vue 中，可以通过 v-for 指令动态渲染文本列表。假设有一个数组 items 包含需要展示的文本内容，可以在模板中直接遍历：

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

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

动态绑定列表数据

如果数据需要从后端获取，可以通过异步请求（如 axios）更新列表数据：

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    }
  },
  async created() {
    const response = await axios.get('/api/items');
    this.items = response.data;
  }
}
</script>

添加列表过滤或搜索功能

通过计算属性实现列表的动态过滤，例如根据用户输入筛选文本：

<template>
  <input v-model="searchQuery" placeholder="搜索文本">
  <ul>
    <li v-for="(item, index) in filteredItems" :key="index">{{ item }}</li>
  </ul>
</template>

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

使用 v-if 处理空列表状态

当列表为空时，可以显示提示信息：

<template>
  <ul v-if="items.length > 0">
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
  <p v-else>暂无数据</p>
</template>

优化列表性能

对于长列表，建议使用 key 绑定唯一标识（如 id 而非 index），或通过虚拟滚动（如 vue-virtual-scroller）提升渲染性能：

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

以上方法覆盖了 Vue 中实现文本列表的常见场景，包括静态渲染、动态加载、搜索过滤和性能优化。