vue实现全匹配搜索列表内容

2024-09-30 00:49:12

本文实例为大家分享了vue实现全匹配搜索列表内容的具体代码，供大家参考，具体内容如下

效果：

组件代码：

<template>
 <div>
 <!-- 搜索框加按钮 -->
<el-input placeholder="请搜索关键词" prefix-icon="el-icon-search" v-model="keyword"></el-input>
<el-button class="searchbtn" @click="search">搜索</el-button>
<!-- 数据 -->
<ul>
 <li v-for="(item,index) in agentlisttwo" :key="item.id" >
   <p>{{item.userID}}</p>
   <p>{{item.agentnum}}</p>
   <p>{{item.username}}</p>
   <p>{{item.phone}}</p>
 </li>
</ul>
 </div>
</template>

 <script>

 export default {
  data() {
  return {
   keyword:'',//搜索关键词
   agentlisttwo:'',//搜索重定义数组
   agentlist: [{
    userID: "1240",
    agentnum: "22",
    username: "张无忌",
    phone: "13112345678",
   },{
    userID: "1241",
    agentnum: "23",
    username: "林平之",
    phone: "13114785236",
   },{
    userID: "1242",
    agentnum: "24",
    username: "令狐冲",
    phone: "13196584589",
   },{
    userID: "1243",
    agentnum: "25",
    username: "独孤求败",
    phone: "13115963256",
   },{
    userID: "1244",
    agentnum: "26",
    username: "包租婆",
    phone: "13110254523",
   },{
    userID: "1245",
    agentnum: "27",
    username: "韦小宝",
    phone: "13187455236",
   },{
    userID: "1246",
    agentnum: "28",
    username: "小燕子",
    phone: "13174552223",
   },{
    userID: "1247",
    agentnum: "29",
    username: "花无期",
    phone: "13174586358",
   }],
  }
  },

  // 创建完成时
  created() {
   //重定义数组
   this.agentlisttwo = this.agentlist;
  },

  methods: {

   search(){
    //搜索
    var keyword = this.keyword;
    if (keyword) {
      this.agentlisttwo = this.agentlist.filter(function(agentlist) {
       return Object.keys(agentlist).some(function(key) {
        return String(agentlist[key]).toLowerCase().indexOf(keyword) > -1
       })
      })
    }else{
     this.agentlisttwo = this.agentlist;
    }
   },

  },
 }

</script>

<style scoped>
p{
 width: 300px;
 height: 30px;
 line-height: 30px;
 border:1px solid black;
 text-align: center;
}
.p1{
 color: red;
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue实现搜索和新闻列表功能简单范例

效果图如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style&
vue实现前台列表数据过滤搜索、分页效果

本文实例为大家分享了vue实现列表数据过滤搜索.分页效果的具体代码,供大家参考,具体内容如下 job.vue页面 <style lang="scss"> .job-wrapper { padding-top: 50px; } .job-left { float: left; margin-right: 20px; padding: 20px; width: 310px; background: #fff; } .job-serach-title { margin: 8px
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法

在 webpack.dev.config.js中 'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require('path') const baseWebpackConfig = require('./web
vue实现全匹配搜索列表内容

本文实例为大家分享了vue实现全匹配搜索列表内容的具体代码,供大家参考,具体内容如下效果: 组件代码: <template> <div>  <el-input placeholder="请搜索关键词" prefix-icon="el-icon-search" v-model="keyword"></el-input> <el-button class
使用 Vue 实现一个虚拟列表的方法

因为 DOM 性能瓶颈,大型列表存在难以克服的性能问题. 因此,就有了 "局部渲染" 的优化方案,这就是虚拟列表的核心思想. 虚拟列表的实现,需要重点关注的问题一有以下几点: 可视区域的计算方法可视区域的 DOM 更新方案事件的处理方案下面逐一分解说明. 可视区域计算可视区域的计算,就是使用当前视口的高度.当前滚动条滚过的距离,得到一个可视区域的坐标区间. 算出可视区域的坐标区间之后,在去过滤出落在该区间内的列表项,这个过程,列表项的坐标也是必须能算出的. 思考以下情况, 我们
JS基于VUE组件实现城市列表效果

本文实例为大家分享了基于VUE组件实现城市列表效果的具体代码,供大家参考,具体内容如下基本思想是,将城市列表数据缓存在本地然后在页面上用JS实现即时模糊查询和首字母定位查询等为了保护项目,删除了部分代码效果实现 H5: <template> <div id="city"> <div class="search-city-back"> <div class="search-city"> &l
基于vue实现循环滚动列表功能

注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width. 先来介绍该组件的用法: 1.安装命令: cnpm install vue-seamless-scroll --save 2.main.js文件中作为全局组件引入 import scroll from 'vue-seamless-scroll' Vue.use(scroll) <vue-seamless-scroll :data="listD
vue结合Axios+v-for列表循环实现网易健康页面(实例代码)

需求说明: 完成网易健康页面的基本布局. 在生命周期函数created()中使用Axios请求“网易健康”数据,数据为本地模拟的数据,详见health.json文件. health.json文件: 链接: https://pan.baidu.com/s/1ofnvp0ncQikVloSmcgueOA?pwd=dhrg 提取码: dhrg 遍历渲染显示“网易健康”接口数据到页面中,页面效果如图. 实现过程: 在项目下安装axios: npm i axios 将health.json文件放到stat
Vue github用户搜索案例分享

目录完成样式 1.public 下新建 css 文件夹 2.新建 Search.vue 3.新建 List.vue 4.App.vue 中引入并注册组件请求数据 1.Search 中请求数据 2.传递数据完善使用 vue-resource 完成样式 1.public 下新建 css 文件夹 public 下新建 css 文件夹,放入下载好的 bootstrap.css,并在 index.html 中引入 2.新建 Search.vue <template> <section
Vue条件渲染与列表渲染

目录一.Vue条件渲染 v-show v-if v-else-if v-else v-if 与 template 小结二.列表渲染 v-show key的作用 1.虚拟DOM中key的作用 2.对比规则 3.用index作为key可能会引发的问题 4.开发中如何选择key? react.vue中的key有什么作用?(key的内部原理) 一.Vue条件渲染 v-show  <h1 v-show="false">{{nam
springboot vue测试前端项目管理列表分页功能实现

目录基于 springboot+vue 的测试平台开发一.前后端调通 1. 请求后端接口 2. 项目列表页面 3. 调整接口返回的时间格式问题二.实现列表数据显示 1. 使用element UI组件库 2. 修改复制来的代码三.实现分页 1.使用组件 2. 给分页相关字段赋值 3. 关于 .sync 修饰符基于 springboot+vue 的测试平台开发继续更新今天来完成项目列表的前端部分. 一.前后端调通开发前端页面,框架里有 2 个地方需要改动: src/views: 这
Vue3如何根据搜索框内容跳转至本页面指定位置

目录需求思路实现过程补充内容总结需求需求:根据搜索框内容跳转至本页面指定位置搜索框是我们在开发各类项目中出现率很高的一个"组件",在element-plus中名为"自动补全输入框",即我们可以根据输入的内容去检索列表或者表格或者其他本页面出现的元素,那我们应该如何去实现这个行为呢? 思路整体过程是这样的: 点击输入框的内容,页面跳转至指定的内容位置实现过程 ①首先我们必须要在页面中引入自动补全输入框组件 template部分 <el-aut

vue实现全匹配搜索列表内容

相关推荐

随机推荐