先看下效果,根据点击后根据搜索的逻辑,可以将全匹配的优先展示,其次根据匹配度依次排序展示,同时忽略简繁体进行搜索。
直接复制即可
注意:里面引入的简繁体转换插件,是在这个博客中已提到 vue3中实现简繁体转换-CSDN博客
如果不需要简繁体转换,就可以去掉
<template>
<div class="test-wrap">
<ul>
<li
:class="['option-item', { active: item.label == key }]"
v-for="(item, index) in baseList"
:key="index"
:value="item.label"
@click="change