VUE 中的搜索关键字

1、定义一个搜索框

<label>搜索关键字：<input type="search" name="" id="" value="" v-model="keywords"/>
</label>

2、循环遍历，之前，v-for 中的数据，都是直接从 data 上的list中直接渲染过来的，现在，我们自定义了一个 search 方法，同时，把所有的关键字，通过传参的形式，传递给了 search 方法，在 search 方法内部，通过执行 for 循环，把所有符合搜索关键字的数据，保存到一个新数组中，返回

<tr v-for="item in search(keywords)" :key="item.id"><td>{{ item.id }}</td><td v-text="item.name"></td><td>{{ item.ctime }}</td>
</tr>

3、在data中，我们写入如下数据

data:{id:'',name:'',keywords:'',list:[{id:1,name:'李白',ctime:new Date()},{id:2,name:'关羽',ctime:new Date()},{id:3,name:'韩信',ctime:new Date()},{id:4,name:'花木兰',ctime:new Date()},{id:5,name:'貂蝉',ctime:new Date()},{id:6,name:'露露',ctime:new Date()},{id:6,name:'大乔',ctime:new Date()},{id:6,name:'荆轲',ctime:new Date()},{id:6,name:'项羽',ctime:new Date()},{id:6,name:'典韦',ctime:new Date()},{id:7,name:'小乔',ctime:new Date()}]
},

4、在methods中，我们根据关键字,进行数据的搜索

methods:{search(keywords) {//根据关键字,进行数据的搜索var newList = []this.list.forEach(item => {if(item.name.indexOf(keywords) != -1){newList.push(item)}})return newList}}

5、我们还可以这样写，注意: forEach some filter findIndex 这些都属于数组的新方法,都会对数组中的每一项,进行遍历,执行相关的操作;注意: ES6 中,为字符串提供了一个新方法,叫做String.prototype.includes('要包含的字符串'),如果包含,则返回 true ,否则返回 false
methods:{

methods:{search(keywords) {//根据关键字,进行数据的搜索//注意: forEach  some    filter  findIndex   这些都属于数组的新方法,//都会对数组中的每一项,进行遍历,执行相关的操作;return this.list.filter(item=>{//if(item.name.indexOf(keywords) != -1)//注意: ES6 中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含的字符串')//如果包含,则返回 true ,否则返回 false//contains  if(item.name.includes(keywords)){return item}})       }}

VUE 中的搜索关键字相关推荐

Vue 项目中高亮搜索关键字
<div class="search"><el-input placeholder="请输入搜索关键字" clearable v-model= ...
vue中根据搜索内容跳转到页面指定位置
<template><div id="app"><header><h3>搜索</h3><input type=&q ...
vue+Element实现搜索关键字高亮功能
本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码,供大家参考,具体内容如下代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ...
从URL中获取搜索关键字
1 public string GetSearchKeyWords(string strQuery) 2 { 3 string result = ""; 4 string patt ...
vue中替换全局字体
引子:工作中需要搭建一个页面,微软雅黑是不支持商用的,需要全局替换成其他字体. 文章目录一.下载字体二.引入字体 1.在项目资源目录下新建一个font文件夹,引入下载好的字体文件 2.编写css文 ...
vue中关键字的搜索，输入关键字列表和分页一起刷新
接着上篇文章,这个是关键字的搜索,输入关键字进行搜索的时候,列表的数据和分页跟着一起改变 <template><div class="all"><di ...
vue中搜索关键词,使文本标红
UserHead.vue中搜索框: <el-col :span="6" :offset="8" class=" ...
基于vue与element-ui写出的关于搜索框搜索关键字，下方关键字高亮的demo
这是一个基于vue与element-ui写出的关于搜索框搜索关键字,下方关键字高亮的demo 希望对大家有所帮助效果如下: <template>< ...
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流参考文章: (1)输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue ...

VUE 中的搜索关键字

VUE 中的搜索关键字相关推荐

最新文章

热门文章