【vue】利用输入框搜索过滤来选择列表
方法1
<div id="app">
<input type="text" @input="handleInput()" v-model="mytext" />
<ul>
<div v-if="isInput">
<li v-for="data in newarr">
{{ data }}
</li>
</div>
<div v-else>
<li v-for="data in arr">
{{ data }}
</li>
</div>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
mytext: [],
newarr: [],
isInput: false,
arr:["aaa","bbb","ccc","abb","aab"]
},
methods:{
handleInput(){
this.newarr=this.arr.filter(item=>{ return item.indexOf(this.mytext)>-1 })
if(this.mytext.length==0)
this.isInput=false
else
this.isInput=true
}
}
})
</script>
方法2
<hr>
<div id="app5">
<input type="text" v-model="mytext">
<div v-for="data in getProvince">
<li>{{ data }}</li>
</div>
</div>
<script>
var app5 = new Vue({
el:'#app5',
data:{
provinces: ["北京","上海","广东","山东","广西","湖南","湖北","安徽","江苏"],
mytext: []
},
computed: {
getProvince(){
newarr=this.provinces.filter(item=>{ return item.indexOf(this.mytext)>-1 })
return newarr
}
}
})
</script>
【vue】利用输入框搜索过滤来选择列表的更多相关文章
- vue input输入框关键字筛选检索列表数据展示
想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo ...
- 支持向量机(SVM)利用网格搜索和交叉验证进行参数选择
上一回有个读者问我:回归模型与分类模型的区别在哪?有什么不同,我在这里给他回答一下 : : : : 回归问题通常是用来预测一个值,如预测房价.未来的天气情况等等,例如一个产品的实际价格为500元,通过 ...
- 利用css实现搜索过滤
无意中找到一种利用css就可实现的搜索过滤的方法,不得不说看了代码之后确实被惊艳到了,亏我之前面试还因为做这个功能做太慢而拖了后腿.在此记录下代码: <!DOCTYPE html> < ...
- Vue数组更新及过滤排序
前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...
- openerp模块收藏 移除下拉选择列表中的“创建并编辑”链接(转载)
移除下拉选择列表中的“创建并编辑”链接 原文:http://shine-it.net/index.php/topic,5990.0.html 有时希望下拉列表中列出的项是与主表某个字段关联的,用户只能 ...
- Android 自定义支持快速搜索筛选的选择控件(一)
Android 自定义支持快速搜索筛选的选择控件 项目中遇到选择控件选项过多,需要快速查找匹配的情况. 做了简单的Demo,效果图如下: 源码地址:https://github.com/whieenz ...
- 如何利用GitHub搜索敏感信息
如何利用GitHub搜索敏感信息 背景: 最近总是能听到同事说在GitHub上搜到某个敏感信息,然后利用该信息成功的检测并发现某个漏洞,最后提交到对应的SRC(安全应急响应中心)换点money.顿时心 ...
- vuejs 1.x - 实例:搜索过滤
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...
- 选择列表中的列……无效,因为该列没有包含在聚合函数或 GROUP BY 子句中
今天用SQL Server尝试实现一个SQL语句的时候,报了如标题所示的错误,通过在百度里面搜索,并亲自动手实现,终于发现问题所在,现在把它记录下来. 语句如下: select [OrderID],[ ...
随机推荐
- ITIL一定要去认证吗?哪个版本合适
关于ITIL的演进 ITIL是在演进发展中的,v1并不成功,v2 v3讲究流程与控制,其实都是偏向务虚,理论东西较多,能落地的少或许OGC的专家们自己也发现 光靠口头忽悠并不能说服最终用户接受ITIL ...
- Django高级表单处理与验证实战
title: Django高级表单处理与验证实战 date: 2024/5/6 20:47:15 updated: 2024/5/6 20:47:15 categories: 后端开发 tags: D ...
- layui.js
目录 用法: 1.在base.js里导入layui插件 2.在使用的html页面里引入 base.js lucky.js index.html 用法: 1.在base.js里导入layui插件 2.在 ...
- Wordpress给每一个分类栏目定制不同的广告位
给分类栏目添加广告位,等同于添加自定义字段. 如果需要依据不同的栏目给广告位添加不同的tag来源,需要在模板页面中获取栏目的分类别名,读取不同的广告. 图1 如图1所示添加新的图片输入框 1. 实现的 ...
- vue特殊attribute-ref
vue.js中文社区文档:ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引 ...
- FE知识点(硕哥)
目录 前传: 1.typeof和类型转换 正文: 1.作用域.作用域链([[scope]]) 2.立即执行函数 3.闭包 4.对象.包装类 5.原型原型链 6.call.apply 7.继承模式.命名 ...
- IPv6 — 路由方式
目录 文章目录 目录 前文列表 IPv6 的路由 前文列表 <IPv6 - 网际协议第 6 版> <IPv6 - 地址格式与寻址模式> <IPv6 - 协议头> & ...
- 5G 系统流程系列:AF 的 Traffic Routing Control 以及 UP 路径管理增强
目录 文章目录 目录 前言 引用 术语 AF 接入 5GC 的 3 种方式 AF Request 及其 Service Information 流量描述(Traffic Description) N6 ...
- windows 文件夹添加备注
1,选中希望改动的文件夹,然后右键"单击",选择"属性"按钮. 2,打开"自定义"面板,选择"更改图标",将原来的默认文 ...
- mybatis-puls解决多数据源事务的问题
直接上代码: pom: <!--JTA组件核心依赖--> <dependency> <groupId>org.springframework.boot</gr ...