在vue中 利用ul实现select的效果

代码:

HTML:


js: 

其中flagList是:


ps: 

1、 flag-icon是“flag-icon-css”这个插件中的class

2、显示/隐藏ul:用v-show="isShowFlagList"控制ul,isShowFlagList初始值为false,点击input框时,改变isShowFlagList状态。为防止用户在输入过程中,误操作点击input后,会将ul隐藏,所以只要input触发keyup事件,isShowFlagList的值始终为true

3、搜索功能的主要思路:现将原数组flag List备份,保存在flagDic中,input触发keyup事件时, 遍历数组falgDic,用indexOf查找输入的值,若找到(返回的不是-1),就将当前值插入flagList中

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择器选择器是jQuery的核心。 事件 动画 扩展
    wyude阅读 491评论 0 1
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,083评论 0 29
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 1,310评论 0 6
  • 《裕语言》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 27,956评论 5 19
  • 好难受,头晕呼呼的!感觉天旋地转似的!怎么这么难受?偏偏孩子还特别气人!抱着我脖子把小身子的重量都压在我身上,我告...
    当爱遇到现实阅读 170评论 0 0