目录

需求

给定一个列表(模拟数据)，根据用户输入，自动筛选输入的内容并输出到屏幕

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/jQuery.js"></script>
  7.     <script src="./js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.     <input type="text" @input="inputFunc" v-model="myText">
  12.     <ul>
  13.         <li v-for="i in newItemList">{{i}}</li>
  14.     </ul>
  15. </div>
  16. </body>
  17. <script>
  18.     new Vue({
  19.         el: '#app',
  20.         data: {
  21.             myText: '',
  22.             itemList: ['a', 'ab', 'abc', 'b', 'bc', 'bdc', 'dbd'],
  23.             newItemList: ['a', 'ab', 'abc', 'b', 'bc', 'bdc', 'dbd']
  24.         },
  25.         methods: {
  26.             inputFunc() {
  27. 	        // 当接收到true，则会将输入的内容返回，并写入到newItemList中，最终输出到屏幕
  28.                 this.newItemList = this.itemList.filter(
  29. 		    // 当输入的内容存在，则返回true
  30.                     item => item.indexOf(this.myText) >= 0
  31.                 )
  32.             }
  33.         }
  34.     })
  35. </script>
  36. </html>

vue之过滤、筛选功能的实现的更多相关文章

  1. wpf,CollectionViewSource，使用数据过滤 筛选 功能。

    class TextListBoxVMpublic : ViewModelBase { public TextListBoxVMpublic() { var list = this.GetEmploy ...

  2. vue---数据列表过滤筛选

    使用vue进行数据过滤筛选是比较常用的功能,常见的使用场景就是搜索框数据筛选过滤了.简单示例: <template> <div> <input type="te ...

  3. cxGrid控件过滤筛选后如何获更新筛选后的数据集

    cxGrid控件过滤筛选后如何获更新筛选后的数据集 (2015-06-19 12:12:08) 转载▼ 标签: delphi cxgrid筛选数据集 cxgrid过滤 分类: Delphi cxGri ...

  4. Yii2.0在GridView中下拉过滤筛选的实现

    Yii2.0在GridView中下拉过滤筛选的实现 细微的方便也许对于我们的用户来说将会获得最好的体验,用最方便,最快捷,最易操作的方式实现用户需要的功能是我们的工作和职责,今天分享一个在Yii2.0 ...

  5. [转载]织梦DEDE多选项筛选_联动筛选功能的实现_二次开发

    织梦默认的列表页没有筛选功能,但有时候我们做产品列表页的时候,产品的字段比较多,很多人都需要用到筛选功能,这样可以让用户更方便的找到自己所需要的东西,实现这个联动筛选功能需要对织梦进行二次开发,下面就 ...

  6. snapde的批量文件数据过滤保存功能

    一.snapde基本介绍 Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它运行的速度非常快,反应非常灵敏. 二.snapde批量数据筛选功能 如果想要对很多文件筛选出来 ...

  7. 织梦CMS实现多条件筛选功能

    用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了. 其实筛选的话,主要有两个问题需要解决,一个是前台的筛选实现,一个是后台根据前台的点击, ...

  8. [Android分享] 【转帖】Android ListView的A-Z字母排序和过滤搜索功能

      感谢eoe社区的分享   最近看关于Android实现ListView的功能问题,一直都是小伙伴们关心探讨的Android开发问题之一,今天看到有关ListView实现A-Z字母排序和过滤搜索功能 ...

  9. phpcms筛选功能

    phpcms论坛的看到的-----做筛选功能-----自定义函数 <?php /** * extention.func.php 用户自定义函数库 * * @copyright (C) 2005- ...

  10. 求解：php商品条件筛选功能你是怎么做出来的？

    求解:php商品条件筛选功能你是怎么做出来的? 2013-09-25 13:43 chenhang607 | 浏览 2756 次 资源共享 求思路或者方法,最好能有些代码 2013-09-25 14: ...

随机推荐

  1. C# 数据结构和算法-数组队列

    队列: 队列是一个有序列表,遵循先入先出原则,可以用数组或链表实现 使用场景 用于排队,按顺序执行 public static void Main(string[] args) { ArrayQueu ...

  2. js使用sort将JSON数据进行排序

    在把数据通过Echarts展示成统计图模式时,柱状统计图需要将数据进行从大到小来排序! 下面为所需要的数据: 1 { 2 mapData: [ 3 {name: '北京',value: '555'}, ...

  3. nginx中proxy_set_header Host $host的作用

    nginx配置upstream负载均衡后请求400,配置proxy_set_header Host $host成功.请问这是什么原理? proxy_set_header Host $host有什么作用 ...

  4. Java发送http请求携带token，使用org.nutz

    发送http请求,需要携带token数据,创建Header传输 Header header = Header.create(); header.set("Authorization" ...

  5. CF1430

    CF1430 那个博客搭好遥遥无期. A: 看代码. #include<bits/stdc++.h> using namespace std; int main() { int t;sca ...

  6. idea乱码

    第一步:修改intellij idea配置文件: 找到intellij idea安装目录,bin文件夹下面idea64.exe.vmoptions和idea.exe.vmoptions这两个文件,分别 ...

  7. Hadoop警告信息：WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform.

    when键入命令: hadoop fs -ls / 若出现以下警告信息: Hadoop警告问题:WARN util.NativeCodeLoader: Unable to load native-ha ...

  8. Ubantu12.04安装及离线安装网卡驱动

    一.用软通牒UltarISO写入硬盘映像,制作启动U盘 装机,ubantu安装很简单. 二.安装网卡驱动 1. 下载e1000e:https://downloadcenter.intel.com/De ...

  9. vue下拉选择select option el-cascader删除重选值的问题

    select当下拉值多的时候 以及input cascader级联选择一个值后  后面我不想要了 vue  提供了一个关键字  可以帮你全部清空 这个关键字就是:clearable

  10. 在centos上使用nginx-rtmp实现hls（Http live Streaming）直播

    欢迎访问我的个人博客:xie-kang.com 原文地址 以下步骤建议在同一目录(如:~/Downloads)下执行(防止小白把目录弄混乱) 下载并解压nginx-rtmp(建议在~/Download ...