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: ...
随机推荐
- element-ui的确认消息弹框校验；$prompt校验
this.$prompt('请输入您的姓名', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /^.+$ ...
- Vue2路由跳转传参，获取路由参数，Vue监听路由
1 this.$router.push({ 2 // name:路由组件名 3 name: routeName, 4 query: { 5 mapId:this.mapId 6 } 7 }) 8 9 ...
- java 递归查子菜单
递归查: @Override public List<PromotionOrgInfoPO> queryOrgInfo() { List<PromotionOrgInfoPO> ...
- 11.25 es6
### 项目初始化 `npm init` `npm init -y` ### 安装项目依赖(包) `npm install` ### 安装 `npm install 包名 --save` `npm i ...
- IDEA2021 在jsp文件中 写out报错
报错原因: 是因为没有关联好服务器: 解决方案 File --> Project structure --> Modules --> 选中当前的模板 --> Dependenc ...
- socket.timeout: The read operation timed out完美解决方案【转】
原博: https://blog.csdn.net/qq_44588905/article/details/113783373 更换 pip 源自国内镜像,在 pip install 后面添加 -i ...
- 基于Nginx以及web服务器搭建在线视频播放
安装Nginx Nginx官网下载地址 网址打开后如图 下载windows版本的Nginx,这里下载最新的1.18.0版本 Nginx在windows下的安装只需要将其解压缩即可.建议将解压后的目录移 ...
- Tutorial_WorkflowProcessor usage in AX 2012
Check under system administration if the BC proxy and workflow excecution account are still valid. C ...
- FIR滤波器的设计
FIR数字滤波器的设计 线性相位FIR滤波器的特点 单位冲激响应:\(h(n),0\leq n\leq N-1\) 系统函数:\(H(z)=\sum_{n=0}^{N-1}h(n)z^{-n}\) 零 ...
- 基于R的Bilibili视频数据建模及分析——预处理篇
基于R的Bilibili视频数据建模及分析--预处理篇 文章目录 基于R的Bilibili视频数据建模及分析--预处理篇 0.写在前面 1.项目介绍 1.1 项目背景 1.2 数据来源 1.3 数据集 ...