vue之过滤、筛选功能的实现
需求
给定一个列表(模拟数据)，根据用户输入，自动筛选输入的内容并输出到屏幕
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/jQuery.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @input="inputFunc" v-model="myText">
<ul>
<li v-for="i in newItemList">{{i}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
myText: '',
itemList: ['a', 'ab', 'abc', 'b', 'bc', 'bdc', 'dbd'],
newItemList: ['a', 'ab', 'abc', 'b', 'bc', 'bdc', 'dbd']
},
methods: {
inputFunc() {
// 当接收到true，则会将输入的内容返回，并写入到newItemList中，最终输出到屏幕
this.newItemList = this.itemList.filter(
// 当输入的内容存在，则返回true
item => item.indexOf(this.myText) >= 0
)
}
}
})
</script>
</html>
vue之过滤、筛选功能的实现的更多相关文章
- wpf,CollectionViewSource，使用数据过滤 筛选 功能。
class TextListBoxVMpublic : ViewModelBase { public TextListBoxVMpublic() { var list = this.GetEmploy ...
- vue---数据列表过滤筛选
使用vue进行数据过滤筛选是比较常用的功能,常见的使用场景就是搜索框数据筛选过滤了.简单示例: <template> <div> <input type="te ...
- cxGrid控件过滤筛选后如何获更新筛选后的数据集
cxGrid控件过滤筛选后如何获更新筛选后的数据集 (2015-06-19 12:12:08) 转载▼ 标签: delphi cxgrid筛选数据集 cxgrid过滤 分类: Delphi cxGri ...
- Yii2.0在GridView中下拉过滤筛选的实现
Yii2.0在GridView中下拉过滤筛选的实现 细微的方便也许对于我们的用户来说将会获得最好的体验,用最方便,最快捷,最易操作的方式实现用户需要的功能是我们的工作和职责,今天分享一个在Yii2.0 ...
- [转载]织梦DEDE多选项筛选_联动筛选功能的实现_二次开发
织梦默认的列表页没有筛选功能,但有时候我们做产品列表页的时候,产品的字段比较多,很多人都需要用到筛选功能,这样可以让用户更方便的找到自己所需要的东西,实现这个联动筛选功能需要对织梦进行二次开发,下面就 ...
- snapde的批量文件数据过滤保存功能
一.snapde基本介绍 Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它运行的速度非常快,反应非常灵敏. 二.snapde批量数据筛选功能 如果想要对很多文件筛选出来 ...
- 织梦CMS实现多条件筛选功能
用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了. 其实筛选的话,主要有两个问题需要解决,一个是前台的筛选实现,一个是后台根据前台的点击, ...
- [Android分享] 【转帖】Android ListView的A-Z字母排序和过滤搜索功能
感谢eoe社区的分享 最近看关于Android实现ListView的功能问题,一直都是小伙伴们关心探讨的Android开发问题之一,今天看到有关ListView实现A-Z字母排序和过滤搜索功能 ...
- phpcms筛选功能
phpcms论坛的看到的-----做筛选功能-----自定义函数 <?php /** * extention.func.php 用户自定义函数库 * * @copyright (C) 2005- ...
- 求解：php商品条件筛选功能你是怎么做出来的？
求解:php商品条件筛选功能你是怎么做出来的? 2013-09-25 13:43 chenhang607 | 浏览 2756 次 资源共享 求思路或者方法,最好能有些代码 2013-09-25 14: ...
随机推荐
- Optional类与使用==判断null有什么区别？使用Optional类有什么优势？
1.使用object==null的例子 2.null带来的问题 3.其他语言中null的处理(替代) 4.Java8的Optional类 4.1 这样做有什么好处呢? 4.2 引入Optional类的 ...
- APPscan设置自动扫描时间
一.设置位置 1.在设置自动扫描时间之前,我们要先创建扫描配置,然后再启动设置面板.2.启动AppScan,单击展开软件顶部菜单栏[工具]按钮,单击下拉菜单内[扫描调度程序],便可启动自动扫描的设置面 ...
- ceph 集群 健康状态报 clock skew detected on mon.tg-ceph-mon-2
1.现象: health: HEALTH_WARN no active mgr mons are allowing insecure global_id reclaim clock skew dete ...
- 高德地图使用websocket后重新设置点进行优化
// 设置第一次点赋值,重新定义一个新数组,将设备号为对象名,索引值作为键值 const getListNEW = useCallback( (params, reload, gps) => { ...
- Charles4.5.1抓取HTTPS请求
Charles下载以后发现 抓取http请求是成功的: 抓取https请求是失败的: 按照失败提示设置即可: 1.点击 Help -> SSL Proxying -> install ch ...
- pandas数据增删改查+拼接
pandas数据的拼接+增删改查 def lengthways_joint(df,df1): #纵向拼接 if list(df.columns) == list(df1.columns): leb_j ...
- hdu:最大点权（强连通分量kosaraju）
Problem Description给定一个有向图,每个点ii有点权a_iai,请对于每个点ii,找到ii能到达的点中点权的最大值(包括ii点). Input第一行包含一个正整数T(1\leq ...
- 解决Pycharm不能识别selenium的部分提示代码
这是解决前,pycharm没有提示相关的webelement的代码,例如:send_keys, click 之类的 把鼠标指针放在 selenium 这个单词上就能看到这一串路径 然后找到这个路径的文 ...
- oracle 用户连接数查询
oracle 用户连接数查询 --当前的连接数 select count(*) from v$session; --数据库允许的最大连接数 select value from v$parameter ...
- c# + appium 连接设备自动化
//private static AndroidDriver<AppiumWebElement> _driver; //private static AppiumLocalService ...