【VUE】vue实现仿select下拉框带搜索小功能

最新推荐文章于 2024-05-23 09:58:10 发布

裴七七

最新推荐文章于 2024-05-23 09:58:10 发布

阅读量2.1k

点赞数 1

分类专栏： vue js css 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44450506/article/details/127319069

版权

js 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

本文实例为大家分享了仿vue实现select下拉框带搜索小功能的具体代码，供大家参考，具体内容如下：

原理主要通过Input输入框和list列表，来仿select的小功能，检测输入框的输入，对数组列表进行关键词过滤，来控制下面列表的显示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="keyword" placeholder="输入关键字" />
            <div class="list">
                <div class="item" v-for="item in fFruit" :key="item">
                   {{item}}
                </div>
            </div>
        </div>
     </body>
     <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript">
          new Vue({
               el:"#app",
               data(){
                    return{
                         keyword:"",
                         fruit:[
                              "苹果","沙果","海棠","野樱莓","枇杷","欧楂","山楂","香梨",
                              "雪梨 ","温柏","蔷薇果","花楸","杏","樱桃","桃","水蜜桃",
                              "油桃","蟠桃","李子","梅子","西梅","白玉樱桃 ","黑莓",
                              "覆盆子","云莓","罗甘莓","白里叶莓","草莓","菠萝莓","橘子",
                              "砂糖桔","橙子","柠檬","青柠","柚子","金桔","葡萄柚","香橼",
                              "佛手","指橙","黄皮果","哈密瓜","香瓜","白兰瓜","刺角瓜"
                         ]
                    }
               },
               computed:{
                    fFruit(){
                         // 如果关键字为空，返回所有的水果
                         if(this.keyword==""){
                             return this.fruit;
                         }else{
                             // 当Frui里面某一项文字包含keyword文字那么就把当前数据保留
                             // filter过滤 返回为真保留，为false就过滤掉
                             return this.fruit.filter(item=>{
                                  return item.includes(this.keyword)
                                 })
                             }
                        }
    
                   }
              })
     </script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助