naiveui , select,filter,demo

NaiveUI是一个开源的、轻量级的前端组件库，它提供了一系列易用且直观的UI组件，包括Select（选择框）、Filter（过滤器）等，用于构建用户界面。Select组件通常用于让用户从预设选项中选择一个值，而Filter则帮助用户根据指定条件筛选数据列表。

例如，`<naive-select>`标签可以创建一个下拉选择框，用户可以选择其中的一个项目：

<template>
  <naive-select v-model="selectedValue">
    <naive-option v-for="item in options" :value="item.value" :key="item.key">{{ item.label }}</naive-option>
  </naive-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ]
    };
  }
};
</script>

`<naive-filter>`组件允许用户输入搜索关键字，动态过滤列表内容：

<template>
  <naive-filter v-model="searchText" @input="onSearch"></naive-filter>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
methods: {
  onSearch(text) {
    this.filteredItems = this.items.filter(item => item.name.includes(text));
  }
}
</script>

至于Demo，NaiveUI官网（https://www.naiveui.com）上有详细的文档和在线示例供开发者参考和实践。你可以直接访问官网获取各种组件的使用演示以及API说明。