<!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. Go xmas2020 学习笔记 09、Closures

    09-Closures.闭包是一种函数,调用具有来自函数外部的附加数据.闭包内的额外数据是引用封闭的

  2. toFixed()与银行家舍入

    toFixed()与银行家舍入 一直在用toFixed()方法做浮点数的舍入取值,如果只是客户端展示数据是没有多大问题的,但是如果涉及到和后端互交,数据的精度可能会导致接口对接失败,当然了,涉及安全性 ...

  3. 推荐个我在用的免费翻译软件，支持多家翻译API整合

    前段时间发了个关于<Spring支持PHP>的视频:点击查看 然后有小伙伴留言说:"你这个翻译好像很好用的样子". 的确,我自己也觉得很好用.之前视频没看过的不知道是哪 ...

  4. 字符串/16进制/ASCII码的转换

    1 /// <字符串转16进制格式,不够自动前面补零> 2 /// 假设文本框里面填写的是:01 02 03 04 05 06 3 /// Str获取的是01 02 03 04 05 06 ...

  5. 基于 Redis 分布式锁

    1.主流分布式锁实现方案 基于数据库实现分布式锁 基于缓存(redis 等) 基于 Zookeeper 2.根据实现方式分类 : 类 CAS 自旋式分布式锁:询问的方式,类似 java 并发编程中的线 ...

  6. Luffy /3/ 前台主页搭建&轮播图接口

    目录 前台主页搭建 components/Homeviwe.vue components/Banner.vue components/Header.vue components/Footer.vue ...

  7. Java 8的18个常用日期处理

    Java 8的18个常用日期处理 一.简介 伴随 lambda表达式.streams 以及一系列小优化,Java 8 推出了全新的日期时间API. Java处理日期.日历和时间的不足之处:将 java ...

  8. Selenium3自动化测试【29】文件上传

    日常在访问页面时,文件上传与下载操作也常常用到,因此在Web自动化测试中也会遇到文件上传的情况.针对上传功能,WebDriver并没有提供对应的方法.针对上传文件的场景主要有两种解决思路: 同步视频知 ...

  9. centos 7.0 下安装FFmpeg软件 过程

    这几天由于需要编写一个语音识别功能,用到了百度语音识别接口,从web端或小程序端传上来的音频文件是aac或者mp3或者wav格式的,需要使用FFmpeg进行格式转换,以符合百度api的要求. 安装FF ...

  10. SpringCloud Gateway 漏洞分析 （CVE-2022-22947）

    背景 SpringCloud 是Spring提供的微服务实现框架,其中包含网关.配置中心和注册中心等内容,网关的第一代实现为zuul,第二代实现为Gateway,提供了更好的性能和特性. 网关可以提供 ...