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: ...
随机推荐
- servlet - 从本地下载图片
import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet. ...
- 视觉里程计--视觉slam7.1/相机运动估计视觉算法
视觉里程计 本篇文章记录了少许阅读<视觉slam14讲>的阅读整理,不是特别全面,只是为了本次项目中特定任务搜查资料,时间比较紧,文章并没有全面涵盖所有知识点.日后若时间有空闲,将回来补充 ...
- 第11章 配置ASP.NET Core应用程序（ASP.NET Core in Action, 2nd Edition）
本章包括 从多个配置提供程序加载设置 安全存储敏感设置 使用强类型设置对象 在不同的宿主环境中使用不同的设置 在本书的第1部分中,您学习了ASP.NET Core应用程序启动和运行的基础知识,以及如何 ...
- 基于CMMI的软件工程及实训指导 第一章
第一章 软件工程基础 1. 软件工程概述 1.1 软件工程概念 软件工程是从管理和技术两方面来研究如何采用工程的概念.原理和技术方面并加以综合,指导开发人员更好地开发和维护计算机软件的一门新学科. 1 ...
- ADB 命令 使用
基本用法 命令语法 为命令指定目标设备 启动/停止 查看 adb 版本 以 root 权限运行 adbd 指定 adb server 的网络端口 设备连接管理 查询已连接设备/模拟器 USB 连接 无 ...
- 用bat文件，自动进入cmd虚拟环境
L:cd L:\myenv\Scriptscmd /K activate.bat 这行,这样写,cmd窗口会继续保留,按任意键也不会关闭. 这个问题网上大部分说法是在批处理里面加上 cmd /k, ...
- 服务器安装docker
安装命令: curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 使用国内 daocloud 一键安装: curl -s ...
- Delphi集合增删的另一种操作
D7 1 unit Unit1; 2 3 interface 4 5 uses 6 Windows, Messages, SysUtils, Variants, Classes, Graphics, ...
- Spyglass CDC工具使用（二）
最近一直在搞CDC (clock domain crossing) 方面的事情,现在就CDC的一些知识点进行总结. 做CDC检查使用的是Spyglass工具.以下内容转载自:Spyglass检查之CD ...
- ASP.NET利用JQuery实现AJAX(前台脚本代码)调用后台静态方法
前台页面的script代码 PS: 如果不需要参数的话,就把data那一行删除 $(function () { //AJAX同步后台 var orderid = parseInt($(this).pa ...