Vue几行代码实现搜索功能
<!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几行代码实现搜索功能的更多相关文章
- Vue 3-150行代码实现新国标红绿灯效果案例
昨天刷视频,都是关于新国标红绿灯的,看大家议论纷纷,下班就用150行代码通过Vue组件实践红绿模拟演示,视频也跟大家展示过了.今天接着更新图文版本,大家跟着优雅哥通过该案例实操模拟一下. 不过新国标红 ...
- Vue下简单分页及搜索功能
最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页 emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...
- TFS2017代码搜索功能
当团队或者公司的研发中心的代码库扩展到了一定程度,在代码库中查找一些需要的代码会变的比较困难.比如敏捷模式下的项目小组希望能够找到并重用其他小组开发的一些基础性的功能代码,我们通常需要去找当事人去询问 ...
- CI 结合 vue.js 的搜索功能模块
CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...
- vue自动完成搜索功能的数据请求处理
在现在的互联网世界里,自动完成的搜索功能是一个很常见的功能.比如百度.搜狗.360搜索 ... 功能描述一下大概是这个样子的:有一个搜索框,用户在里面输入要查询的条件,系统会“智能”判断用户输完了,然 ...
- vue 使用watch监听实现类似百度搜索功能
watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...
- asp.net导出excel-一行代码实现excel、xml、pdf、word、html、csv等7种格式文件导出功能而且美观-SNF快速开发平台
分享: 腾讯微博 新浪微博 搜狐微博 网易微博 腾讯朋友 百度贴吧 豆瓣 QQ好友 人人网 作者:王春天 原文地址:http://www.cnblogs.com/spring_ ...
- 20 行代码极速为 App 加上聊天功能
现在很多 App 都需要集成 IM 功能,今天就为大家分享一下集成 IM 基本功能的步骤.本文内容以 JMessage 为例.极光 IM ( JMessage ) = 极光推送 ( JPush ) + ...
- 50行代码实现python计算器主要功能
实现功能:计算带有括号和四则运算的式子 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层 ...
随机推荐
- Java 使用-安装
Java 使用-安装 官方网站 JDK 下载地址 JDK 历史版本 参考资料 CentOS7系统卸载自带的OpenJDK并安装SUNJDK CentOS7卸载 OpenJDK 安装Sun的JDK8 安 ...
- MySQL学习day3随笔
索引在数据量不大的时候体现不出来,数据很多的时候区别明显 1 select * from app_user where `name`='用户9999';-- 0.053 sec 2 select * ...
- 【直播回顾】OpenHarmony知识赋能第四期第二课——GPIO驱动开发
3月17日晚上19点,知识赋能第四期直播的第二节课<OpenHarmony标准系统HDF框架之GPIO驱动开发>,在OpenHarmony开发者成长计划社群内成功举办. 本期课程,由 ...
- JavaScript基础第05天笔记
JavaScript基础第05天笔记 1 - 作用域 1.1 作用域概述 通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域.作用域的使用提 ...
- ES 文档与索引介绍
在之前的文章中,介绍了 ES 整体的架构和内容,这篇主要针对 ES 最小的存储单位 - 文档以及由文档组成的索引进行详细介绍. 会涉及到如下的内容: 文档的 CURD 操作. Dynamic Mapp ...
- 2021.12.15 P2328 [SCOI2005]超级格雷码(找规律填空)
2021.12.15 P2328 [SCOI2005]超级格雷码(找规律填空) https://www.luogu.com.cn/problem/P2328 题意: 输出n位B进制的格雷码. 分析: ...
- client 系列
定义 : client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息.通过client系列的相关属性可以动态的得到该元素的边框大小.元素大小等.
- 痞子衡嵌入式：聊聊系统看门狗WDOG1在i.MXRT1xxx系统启动中的应用及影响
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是系统看门狗WDOG1在i.MXRT1xxx系统启动中的应用及影响. 软件看门狗模块(WDOG)在 MCU 应用里可以说是非常基础的功能模 ...
- LVM从VG中删除PV及删除未知PV
当我们的硬盘发被删除掉了,我们的PV卷会变成[unknown] 一.首先我们要备份我们的文件,然后再删除lv分区 二. VG中去除PV unknown device:
- 从零开始搭建GoLang语言开发环境
更多干货文章,更多最新文章,欢迎到作者主博客 菜鸟厚非 一.安装 GoLang 1.1 下载 首先访问 https://go.dev/dl/ 下载 GoLang,下载完成后双击安装即可.如下: 1.2 ...