<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>search</title>

    <script src="vue.js"></script>

</head>

<body>

    <div id="app">

        <input v-model='search' />

        <ul v-for="(item,index) in searchData " :key='index'>

            <li>{{item.num}}</li>

        </ul>

    </div>

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                search: '',

                list: [{

                    num:1

                }, {

                    num:2

                }, {

                    num:3

                }, {

                    num:4

                }]

            },

            computed: {

                searchData: function () {

                    var search = this.search;

                    if (search) {

                        return this.list.filter(function (item) {

                            return Object.keys(item).some(function (key) {

                                return String(item[key]).toLowerCase().indexOf(search) >-1

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119328653

Vue几行代码实现搜索功能的更多相关文章

  1. Vue 3-150行代码实现新国标红绿灯效果案例

    昨天刷视频,都是关于新国标红绿灯的,看大家议论纷纷,下班就用150行代码通过Vue组件实践红绿模拟演示,视频也跟大家展示过了.今天接着更新图文版本,大家跟着优雅哥通过该案例实操模拟一下. 不过新国标红 ...

  2. Vue下简单分页及搜索功能

    最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页   emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...

  3. TFS2017代码搜索功能

    当团队或者公司的研发中心的代码库扩展到了一定程度,在代码库中查找一些需要的代码会变的比较困难.比如敏捷模式下的项目小组希望能够找到并重用其他小组开发的一些基础性的功能代码,我们通常需要去找当事人去询问 ...

  4. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  5. vue自动完成搜索功能的数据请求处理

    在现在的互联网世界里,自动完成的搜索功能是一个很常见的功能.比如百度.搜狗.360搜索 ... 功能描述一下大概是这个样子的:有一个搜索框,用户在里面输入要查询的条件,系统会“智能”判断用户输完了,然 ...

  6. vue 使用watch监听实现类似百度搜索功能

    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...

  7. asp.net导出excel-一行代码实现excel、xml、pdf、word、html、csv等7种格式文件导出功能而且美观-SNF快速开发平台

    分享: 腾讯微博  新浪微博   搜狐微博   网易微博  腾讯朋友  百度贴吧  豆瓣   QQ好友  人人网 作者:王春天  原文地址:http://www.cnblogs.com/spring_ ...

  8. 20 行代码极速为 App 加上聊天功能

    现在很多 App 都需要集成 IM 功能,今天就为大家分享一下集成 IM 基本功能的步骤.本文内容以 JMessage 为例.极光 IM ( JMessage ) = 极光推送 ( JPush ) + ...

  9. 50行代码实现python计算器主要功能

    实现功能:计算带有括号和四则运算的式子   3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层 ...

随机推荐

  1. Python学习进度汇报

    学习进度还是比较慢的,上周五(18号晚上安装了Pycharm)就开始学,五天只到这个位置,当前一直是2倍速看黑马的Python视频,外加查看菜鸟的文档,需要加快一些进度了,后续还有后续的目标要实现,争 ...

  2. python基础练习题（题目 取一个整数a从右端开始的4〜7位。）

    day36 --------------------------------------------------------------- 实例054:位取反.位移动 题目 取一个整数a从右端开始的4 ...

  3. C#语法糖系列 —— 第一篇：聊聊 params 参数底层玩法

    首先说说为什么要写这个系列,大概有两点原因. 这种文章阅读量确实高... 对 IL 和 汇编代码 的学习巩固 所以就决定写一下这个系列,如果大家能从中有所收获,那就更好啦! 一:params 应用层玩 ...

  4. 【转】python代码优化常见技巧

    https://blog.csdn.net/egefcxzo3ha1x4/article/details/97844631

  5. Java中时间类中的Data类与Time类

    小简博客 - 小简的技术栈,专注Java及其他计算机技术.互联网技术教程 (ideaopen.cn) Data类 Data类中常用方法 boolean after(Date date) 若当调用此方法 ...

  6. 技术分享 | WEB 端常见 Bug 解析

    对于 WEB 产品来说,有一些常见的 Bug,本章节挑选一些比较典型的 Bug 进行举例介绍. UI Bug 页面展示的时候,需要根据长度的边界值去设计用例进行验证.   一般来说都会有超长内容的验证 ...

  7. 1.2 Linux是什么，有哪些特点？

    与大家熟知的 Windows 操作系统软件一样,Linux 也是一个操作系统软件,其 logo 是一只企鹅(如图 1 所示).与 Windows 不同之处在于,Linux 是一套开放源代码程序的.可以 ...

  8. KMP算法学习以及小结（好马不吃回头草系列）

    首先请允许我对KMP算法的三位创始人Knuth,Morris,Pratt致敬,这三位优秀的算法科学家发明的这种匹配模式可以大大避免重复遍历的情况,从而使得字符串的匹配的速度更快,效率更高. 首先引入对 ...

  9. 0.1+0.2不等于0.3，微信小程序云开发如何解决JavaScript小数计算精度失准的问题

    先看图 这个是JavaScript语言自身存在的一个问题.说道这里不得不提一下网上流传的JavaScript搞笑图 我们在使用云开发来开发微信小程序的时候,会经常遇到JavaScript小数计算精度失 ...

  10. AQS源码三视-JUC系列

    AQS源码三视-JUC系列 前两篇文章介绍了AQS的核心同步机制,使用CHL同步队列实现线程等待和唤醒,一个int值记录资源量.为上层各式各样的同步器实现画好了模版,像已经介绍到的ReentrantL ...