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: ...
随机推荐
- sql 字符串末尾空格不占长度
print len('qwer ');--4 print len('qwer ');--4 print len('qwer ' + 't');-- ...
- mysql锁表原因及解决方法
mysql锁表原因及解决方法 一.导致锁表的原因 1.锁表发生在insert update .delete 中: 2.锁表的原理是 数据库使用独占式封锁机制,当执行上面的语句时,对表进行锁住,直到 ...
- PR2022(Premiere Pro 2022)Mac/win最新中文版
Adobe Premiere Pro 2022 Mac/win是用于专业级别的视频编辑软件,一个基于时间轴的视频处理工具,具有许多用于生成高端视频的不同功能.Adobe Premiere Pro最重要 ...
- jmeter性能测试学习1_配置oracl jdbc连接
1.导入orcle驱动的jar包 2.添加配置元件选择 JDBC连接配置 3.添加取样器 JDBCrequest 4.添加观察树,运行 配好密码 OK
- BinarySearch，逆序排列的数组的二分查找（折半查找），C++非递归+递归实现
1 // To Compile and Run: g++ binary_search.cc -std=c++11 -Wall -O3 && ./a.out 8 2 3 4 #inclu ...
- centos mail 发邮件
1.安装mailx yum -y install mailx 2. /etc/mail.rc 最后增加邮件配置如 set smtp=smtp.qq.comset smtp-auth=loginset ...
- Vue+SSM+Element-Ui实现前后端分离(2)
前言:后台使用ssm搭建,对以前学习知识的一个回顾,与此同时来发现自己不足.这里主要采用配置文件方式进行,有部分注解. 目标:搭建ssm框架,并测试成功:(其中也有aop切面的编写) 一.开发工具 I ...
- new一个实例的原理及过程
前提,要明白new出来的实例是什么,包含了哪些内容? 请看一下举例代码↓↓↓↓ function Person(name,age){ this.name = name; this.age = age; ...
- 功能测试--Fiddler
Fiddler(更推荐Charles,很好用) 1.fiddler是什么?------客户端的所有请求都要先经过fiddler,然后转发到服务器:反之,服务器的所有响应,也会先经过fiddler,然后 ...
- pytest之运行环境
简介 pytest是Python最流程化的单元测试框架,它具有允许直接使用assert进行断言,而不需要使用self.assert*:可以自动寻找单测文件.类和函数,还可支持执行部分用例:Modula ...