首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue几行代码实现搜索功能

Vue几行代码实现搜索功能

作者头像
马克社区
发布于 2022-05-24 10:44:53
发布于 2022-05-24 10:44:53
56000
代码可运行
举报
文章被收录于专栏:高端IT高端IT
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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
123456789101112131415161718192021222324252627282930313233343536373839404142

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

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue 快速入门(四)
msg.reserseMsg依赖于 msg.message,在 msg.message 发生改变时,msg.reserseMsg也会更新。
全栈测试开发日记
2023/03/06
5810
Vue 快速入门(四)
Vue 实现表格搜索、固定表头与排序 原
在搜索完,删除搜索内容后展示所有的内容,用computed就比较容易实现,思路:v-model绑定搜索关键字,在tbody的tr上v-for循环计算属性。methods也可以实现需要改成
tianyawhl
2019/04/04
2.7K0
第一章 : Vue2 技术精讲
① 对象 → 键就是类名,值是布尔值。如果值为 true,有这个类,否则没有这个类
捞月亮的小北
2023/12/01
2540
第一章 : Vue2 技术精讲
Vue.js与Node.js一起打造一款属于自己的音乐App(收藏)
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118755888
马克社区
2022/05/12
4750
【Vue.js——关键字匹配】搜一搜呀(蓝桥杯真题-1762)【合集】
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。 打开环境右侧的【Web 服务】,当前页面无法正常显示。
Rossy Yan
2025/01/24
800
【Vue.js——关键字匹配】搜一搜呀(蓝桥杯真题-1762)【合集】
Web前端-Vue.js必备框架(二)
mustache插值和v-bind表达式。 vue生命周期,从创建,运行,到销毁,称为生命周期。
达达前端
2019/07/03
3K0
vue快速学习02、基础用法
vue快速学习02、基础用法 目录 vue快速学习02、基础用法 1、数据双向绑定 2、数据绑定 3、钩子函数 4、created函数用法1 5、created函数用法2 6、filters过滤器 7、v-once与v-text 8、数据计算 9、数据绑定 10、样式控制1 11、样式控制2 12、v-if 14、v-on 15、watch 16、v-for 17、computed 18、table增加操作 19、table删除操作 20、table修改 21、template 22、componen
红目香薰
2022/11/30
1K0
vue快速学习02、基础用法
Vue 基础入门
Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 ,Vue.js 也能完美地驱动复杂的单页应用。  ♞ Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。  ♞ Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。  ♞ Vue 借鉴了 Angular 的模板和双向绑定技术;借鉴了 react 的组件化和虚拟 DOM 技术。  ♞ MVVM 模式是 Model-View-ViewModel 的缩写,Model 代表数据模型,定义数据操作的业务逻辑,View 代表视图层,负责将数据模型渲染到页面上,ViewModel 通过双向绑定把 View 和 Model 进行同步交互,不需要手动操作DOM 的一种设计思想
Demo_Null
2020/09/29
7800
04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用
vue组件 组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的
iginkgo18
2020/11/24
1.6K0
04 .  Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用
【编程鹿】学Vue.js这一篇就够了「万字学会|通俗易懂」上篇
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。
鹿老师的Java笔记
2020/12/02
12.7K0
【编程鹿】学Vue.js这一篇就够了「万字学会|通俗易懂」上篇
vue2.5入门(推荐,差代码) 原
课程地址:https://www.imooc.com/learn/980 教程:https://cn.vuejs.org/v2/guide 放在头部,避免页面出现抖屏 挂载点 下面是原生 模板 <
晓歌
2018/08/15
8830
vue2.5入门(推荐,差代码)
                                                                            原
vue脚手架基础demo1
【table-striped】【table-bordered】【table-hover】【table-condensed】
红目香薰
2022/11/30
7010
vue脚手架基础demo1
【Vue.js】008-列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名;
訾博ZiBo
2025/01/06
2630
【Vue.js】008-列表渲染
Vue(上)
新建一个Html项目(在vscode中输入 ! 加 Tab键 可快速生成一个标准的Html模板);
十玖八柒
2022/08/01
2.5K0
Vue(上)
前端成神之路-vue03
组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代 组件注册 全局注册 Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象 全局组件注册后,任何vue实例都可以用 组件基础用 <div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component></my-component> </div> <script>
海仔
2021/03/20
6.1K0
Vue零基础开发入门
讲解部分 Vue 基础语法,通过 TodoList 功能编写,在熟悉基础语法的基础上,扩展解析 MVVM 模式及前端组件化的概念及优势。
JavaEdge
2022/11/30
3.6K0
Vue零基础开发入门
vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
MVX模式简介: MVX框架模式:MVC+MVP+MVVM MVC: Model模型+View视图+Controller控制器
达达前端
2019/12/13
4.2K0
vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
【Vue】(2)基础知识 | 过滤器 | 指令
前端修罗场
2023/10/07
2880
Vue成神之路之内部指令
vue.js——开发版本:包含完整的警告和调试模式 vue.min.js——生产版本:删除了警告,进行了压缩
小胖
2018/12/14
2.7K0
Vue 相关学习笔记(一)
可能有安全问题, 一般只在可信任内容上使用 v-html,永不用在用户提交的内容上
用户6808043
2022/02/24
7.7K0
Vue 相关学习笔记(一)
相关推荐
Vue 快速入门(四)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档