vue实现搜索小功能

 更新时间:2021年11月25日 16:15   作者:温L
这篇文章主要为大家详细介绍了vue实现搜索小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现搜索小功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <div id="app">
   <input type="text" v-model="keyword" placeholder="输入关键字" />
   <div class="list">
    <div class="item" v-for="item in fFruit" :key="item">
     {{item}}
    </div>
   </div>
  </div>
 </body>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  new Vue({
   el:"#app",
   data(){
    return{
     keyword:"",
     fruit:[
      "苹果","沙果","海棠","野樱莓","枇杷","欧楂","山楂","香梨",
      "雪梨 ","温柏","蔷薇果","花楸","杏","樱桃","桃","水蜜桃",
      "油桃","蟠桃","李子","梅子","西梅","白玉樱桃 ","黑莓",
      "覆盆子","云莓","罗甘莓","白里叶莓","草莓","菠萝莓","橘子",
      "砂糖桔","橙子","柠檬","青柠","柚子","金桔","葡萄柚","香橼",
      "佛手","指橙","黄皮果","哈密瓜","香瓜","白兰瓜","刺角瓜"
     ]
    }
   },
   computed:{
    "fFruit"(){
     // 如果关键字为空,返回所有的水果
     if(this.keyword==""){
     return this.fruit;
    }else{
     // 当Frui里面某一项文字包含keyword文字那么就把当前数据保留
     // filter过滤 返回为真保留,为false就过滤掉
     
     return this.fruit.filter(item=>{
      return item.includes(this.keyword)
     })
    }
    }
    
   }
  })
 </script>
</html>

结果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。

原文出处:https://blog.csdn.net/lwf0829/article/details/121516743

相关文章

  • vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09
  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
  • 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

    这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23
  • vue实现同时设置多个倒计时

    这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
  • 详解Vue Cli浏览器兼容性实践

    这篇文章主要介绍了详解Vue Cli浏览器兼容性实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
  • vue 实现用户登录方式的切换功能

    这篇文章主要介绍了vue 实现用户登录方式的切换功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-04-14
  • 怎么对百度网页搜索的检索指标进行评估

    用户为满足自己某种需求而来到搜索引擎的,判断用户的需求是做好网站的开始。只有准确地判断出用户需求,了解用户搜索的目的,才能合理地衡量出一个网站结果的质量好,做好搜...2016-10-10
  • vue router路由参数刷新消失问题的解决方法

    这篇文章主要介绍了vue-router路由参数刷新消失的问题...2017-06-24
  • 如何避免被搜索引擎视为作弊

      一个网站要想成功注册,它起码应具备两个条件,一是网站本身要有较好的内容和设计,二是网站没有作弊行为。这里所谓的“作弊”,是指采用一些特殊的、有悖常规的网...2016-09-20
  • yii2带搜索功能的下拉框实例详解

    带搜索功能下拉框在项目中经常会用到,下面小编把实现代码分享到脚本之家平台,供大家参考...2016-05-13
  • php搜索csv表格中是否存在指定数据

    php搜索csv中的数据原理是打开csv文件,然后一行行搜索指定的内容是否包含在我们读取这代码中,如果是返回true。 //搜索csv中指定内容 代码如下 复制代码...2016-11-25
  • vue2实现provide inject传递响应式

    在看element-ui的源码的时候,注意到源码里面有很多地方使用provide和inject的属性,本文主要介绍了vue2实现provide inject传递响应式,分享给大家,感兴趣的可以了解一下...2021-05-22
  • Asp.net中使用DapperExtensions和反射来实现一个通用搜索

    这篇文章主要介绍了Asp.net中使用DapperExtensions和反射来实现一个通用搜索功能,非常不错,具有参考解决价值,需要的朋友可以参考下...2021-09-22
  • vue项目,代码提交至码云,iconfont的用法说明

    这篇文章主要介绍了vue项目,代码提交至码云,iconfont的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-30
  • vue接口请求加密实例

    这篇文章主要介绍了vue接口请求加密实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
  • Vue+Openlayer批量设置闪烁点的实现代码(基于postrender机制)

    本篇文章给大家介绍基于postrender机制使用Vue+Openlayer批量设置闪烁点的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-09-01
  • WebStorm无法正确识别Vue3组合式API的解决方案

    这篇文章主要介绍了WebStorm无法正确识别Vue3组合式API的解决方案,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-18
  • Vue初始化中的选项合并之initInternalComponent详解

    这篇文章主要介绍了Vue初始化中的选项合并之initInternalComponent的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-11
  • ECMS(帝国CMS)搜索伪静态教程

    本次修改是基于ECMS(帝国cms) EmpireCMS v7.0 Free (201301151518)版本下测试修改的。其他未测试,大同小异吧。可以根据修改做修改即可...2015-12-30