vue姓名筛选模糊搜索

1、名字筛选功能主要运用了计算属性关键词: computed

2、效果图

输入“六”关键字显示名字带“六”的所有名字

3、代码（vue.js记得修改目录）

用到的数据：

list: [{name: '张三', sex: '女', age: 19, phone: '18921212121'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '赵六', sex: '男', age: 49, phone: '18921556121'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '赵六', sex: '男', age: 49, phone: '18921556121'},{name: '李思思', sex: '男', age: 29, phone: '18921221121'},{name: '张三', sex: '女', age: 19, phone: '18921212121'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '赵六', sex: '男', age: 49, phone: '18921556121'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '赵六', sex: '男', age: 49, phone: '18921556121'},{name: '李五五', sex: '男', age: 29, phone: '18921221121'}],

完整代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模糊搜索</title><script src="./vue.js"></script><style type="text/css">body{background-color: #cecece;}input{height: 25px;margin-bottom: 10px;}</style></head><body><div id="app"><h1>名字筛选</h1><input type="text" v-model="keyword" placeholder="请输入名字"><div class="list"><table border="1" cellspacing="0" cellpadding="0"><tr><td>姓名</td><td>性别</td><td>年龄</td><td>电话</td></tr><tr v-for="(item,index) in flist" :key="item.index"><td>{{item.name}}</td><td>{{item.sex}}</td><td>{{item.age}}</td><td>{{item.phone}}</td></tr></table></div></div><script type="text/javascript">new Vue({el:"#app",data:{keyword:"",list: [{name: '张三', sex: '女', age: 19, phone: '18921212121'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '赵六', sex: '男', age: 49, phone: '18921556121'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '赵六', sex: '男', age: 49, phone: '18921556121'},{name: '李思思', sex: '男', age: 29, phone: '18921221121'},{name: '张三', sex: '女', age: 19, phone: '18921212121'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '赵六', sex: '男', age: 49, phone: '18921556121'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '李四', sex: '男', age: 29, phone: '18921221121'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '王五', sex: '女', age: 39, phone: '18921788721'},{name: '赵六', sex: '男', age: 49, phone: '18921556121'},{name: '李五五', sex: '男', age: 29, phone: '18921221121'}],},computed: {flist() {// 如果输入的名字在list存在,返回有这个字的名字// item.name这里是按名字搜索，也可按其他进行搜索return this.list.filter(item => item.name.includes(this.keyword));}},})</script></body>
</html>

编写代码不易，记得点赞支持哦哦哦~~~

vue姓名筛选模糊搜索相关推荐

Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
vue中实现模糊搜索
vue中实现模糊搜索, 代码如下: 首先在框架中写一个input输入框 <template><div>//v-model实现双向绑定<input type="t ...
vue 实现前端模糊搜索
文章目录数组对象的模糊查询数组的模糊查询数组对象的模糊查询在vue中,前端模糊搜索主要是用computed属性实现,具体代码如下: 使用fitler 过滤器和indexOf 方法 filte ...
Vue - 姓名案例
文章目录 methods实现源码测试演示计算属性实现源码测试演示讲师笔记计算属性(简写源码) 思考 methods实现源码 <!DOCTYPE html> <html ...
vue分类筛选方法，filer
使用computed 方法来过滤筛选数据;也可以使用methods 方式来筛选过滤数据代码如下: <body> <div id="app"> <ul ...
vue中解决模糊搜索输入中文时--未输入完成时触发input事件
在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到compositionstart,compositionend. 主流 ...
vue简单实现模糊搜索
1:准备数据: data () {return {//主要搜索的对象数组questionArrayList : {questionName : "",questionValue : ...
你知道，什么时候用Vue计算属性吗？
摘要:当我们处理复杂逻辑时,都应该使用计算属性. 本文分享自华为云社区<深入理解计算属性,知道什么时候该用Vue计算属性吗?>,作者: 前端老实人 . 计算属性有些时候,我们在模板中放入 ...
vue入门教程（一）
1. vue简介 1.1 vue是什么官网:https://cn.vuejs.org/ Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vu ...

vue姓名筛选模糊搜索

vue姓名筛选模糊搜索相关推荐

最新文章

热门文章