方法1
  1. <div id="app">
  2. <input type="text" @input="handleInput()" v-model="mytext" />
  3. <ul>
  4. <div v-if="isInput">
  5. <li v-for="data in newarr">
  6. {{ data }}
  7. </li>
  8. </div>
  9. <div v-else>
  10. <li v-for="data in arr">
  11. {{ data }}
  12. </li>
  13. </div>
  14. </ul>
  15. </div>
  16. <script>
  17. var app = new Vue({
  18. el:'#app',
  19. data:{
  20. mytext: [],
  21. newarr: [],
  22. isInput: false,
  23. arr:["aaa","bbb","ccc","abb","aab"]
  24. },
  25. methods:{
  26. handleInput(){
  27. this.newarr=this.arr.filter(item=>{ return item.indexOf(this.mytext)>-1 })
  28. if(this.mytext.length==0)
  29. this.isInput=false
  30. else
  31. this.isInput=true
  32. }
  33. }
  34. })
  35. </script>
方法2
  1. <hr>
  2. <div id="app5">
  3. <input type="text" v-model="mytext">
  4. <div v-for="data in getProvince">
  5. <li>{{ data }}</li>
  6. </div>
  7. </div>
  8. <script>
  9. var app5 = new Vue({
  10. el:'#app5',
  11. data:{
  12. provinces: ["北京","上海","广东","山东","广西","湖南","湖北","安徽","江苏"],
  13. mytext: []
  14. },
  15. computed: {
  16. getProvince(){
  17. newarr=this.provinces.filter(item=>{ return item.indexOf(this.mytext)>-1 })
  18. return newarr
  19. }
  20. }
  21. })
  22. </script>

【vue】利用输入框搜索过滤来选择列表的更多相关文章

  1. vue input输入框关键字筛选检索列表数据展示

    想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo ...

  2. 支持向量机(SVM)利用网格搜索和交叉验证进行参数选择

    上一回有个读者问我:回归模型与分类模型的区别在哪?有什么不同,我在这里给他回答一下 : : : : 回归问题通常是用来预测一个值,如预测房价.未来的天气情况等等,例如一个产品的实际价格为500元,通过 ...

  3. 利用css实现搜索过滤

    无意中找到一种利用css就可实现的搜索过滤的方法,不得不说看了代码之后确实被惊艳到了,亏我之前面试还因为做这个功能做太慢而拖了后腿.在此记录下代码: <!DOCTYPE html> < ...

  4. Vue数组更新及过滤排序

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...

  5. openerp模块收藏 移除下拉选择列表中的“创建并编辑”链接(转载)

    移除下拉选择列表中的“创建并编辑”链接 原文:http://shine-it.net/index.php/topic,5990.0.html 有时希望下拉列表中列出的项是与主表某个字段关联的,用户只能 ...

  6. Android 自定义支持快速搜索筛选的选择控件(一)

    Android 自定义支持快速搜索筛选的选择控件 项目中遇到选择控件选项过多,需要快速查找匹配的情况. 做了简单的Demo,效果图如下: 源码地址:https://github.com/whieenz ...

  7. 如何利用GitHub搜索敏感信息

    如何利用GitHub搜索敏感信息 背景: 最近总是能听到同事说在GitHub上搜到某个敏感信息,然后利用该信息成功的检测并发现某个漏洞,最后提交到对应的SRC(安全应急响应中心)换点money.顿时心 ...

  8. vuejs 1.x - 实例:搜索过滤

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  9. vue-resource使用 (vue仿百度搜索)

    1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...

  10. 选择列表中的列……无效,因为该列没有包含在聚合函数或 GROUP BY 子句中

    今天用SQL Server尝试实现一个SQL语句的时候,报了如标题所示的错误,通过在百度里面搜索,并亲自动手实现,终于发现问题所在,现在把它记录下来. 语句如下: select [OrderID],[ ...

随机推荐

  1. ITIL一定要去认证吗?哪个版本合适

    关于ITIL的演进 ITIL是在演进发展中的,v1并不成功,v2 v3讲究流程与控制,其实都是偏向务虚,理论东西较多,能落地的少或许OGC的专家们自己也发现 光靠口头忽悠并不能说服最终用户接受ITIL ...

  2. Django高级表单处理与验证实战

    title: Django高级表单处理与验证实战 date: 2024/5/6 20:47:15 updated: 2024/5/6 20:47:15 categories: 后端开发 tags: D ...

  3. layui.js

    目录 用法: 1.在base.js里导入layui插件 2.在使用的html页面里引入 base.js lucky.js index.html 用法: 1.在base.js里导入layui插件 2.在 ...

  4. Wordpress给每一个分类栏目定制不同的广告位

    给分类栏目添加广告位,等同于添加自定义字段. 如果需要依据不同的栏目给广告位添加不同的tag来源,需要在模板页面中获取栏目的分类别名,读取不同的广告. 图1 如图1所示添加新的图片输入框 1. 实现的 ...

  5. vue特殊attribute-ref

    vue.js中文社区文档:ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引 ...

  6. FE知识点(硕哥)

    目录 前传: 1.typeof和类型转换 正文: 1.作用域.作用域链([[scope]]) 2.立即执行函数 3.闭包 4.对象.包装类 5.原型原型链 6.call.apply 7.继承模式.命名 ...

  7. IPv6 — 路由方式

    目录 文章目录 目录 前文列表 IPv6 的路由 前文列表 <IPv6 - 网际协议第 6 版> <IPv6 - 地址格式与寻址模式> <IPv6 - 协议头> & ...

  8. 5G 系统流程系列:AF 的 Traffic Routing Control 以及 UP 路径管理增强

    目录 文章目录 目录 前言 引用 术语 AF 接入 5GC 的 3 种方式 AF Request 及其 Service Information 流量描述(Traffic Description) N6 ...

  9. windows 文件夹添加备注

    1,选中希望改动的文件夹,然后右键"单击",选择"属性"按钮. 2,打开"自定义"面板,选择"更改图标",将原来的默认文 ...

  10. mybatis-puls解决多数据源事务的问题

    直接上代码: pom: <!--JTA组件核心依赖--> <dependency> <groupId>org.springframework.boot</gr ...