目录

需求

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

代码

<!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之过滤、筛选功能的实现的更多相关文章

  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. Vue3引用全局js

    在vue3中引入全局js: 1,创建一个js文件: 2,在main.js中引入该js文件: import comm from './utils/comm' app.config.globalPrope ...

  2. JAVA基础Day3-用户交互Scanner/顺序结构/选择结构/循环结构

    一.用户交互Scanner JAVA提供了一个工具类,可以用来获取用户的输入. java.util.Scanner是Java5的新特征,可以通过Scanner类来获取用户的输入. 基本语法: Scan ...

  3. UVA10404

    由题意可知,这题和巴什博弈没什么关系了 相似题目:AtCoder Beginner Contest 278 F - Shiritori 预备知识:DP,博弈论的必胜态和必败态 问题的关键是确定\(f_ ...

  4. mybatis中xml配置文件头部

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC ...

  5. 时间格式转换成指定格式(Vue)

    1 /** 2 * Parse the time to string 3 * @param {(Object|string|number)} time 4 * @param {string} cFor ...

  6. mysql索引的面试常问问题

  7. 12.6linux学习第十三天

    今天老刘开始讲第9第章使用ssh服务管理远程主机.第10章开了个小头. 9.1 配置网卡服务 9.1.1 配置网卡参数 截至目前,大家已经完全可以利用当前所学的知识来管理Linux系统了.当然,大家的 ...

  8. MacOS使用iTerm2 tab不区分大小写解答

    打开控制台 输入 vim ~/.zshrc 按下 i 之后  // i == insert插入字符 粘贴以下代码 复制到该文件中 autoload -Uz compinit && co ...

  9. .net 反射简单介绍

    1.什么是反射 反射是.NET中的重要机制,通过反射,可以在运行时获得程序或程序集中每一个类型(包括类.结构.委托.接口和枚举等)的成员和成员的信息.有了反射,即可对每一个类型了如指掌.另外我还可以直 ...

  10. Expression及Equal Demo

    代码参考1: using System; using System.Linq.Expressions; namespace ExpressionDemo { class People { public ...