vue实现姓名筛选

最新推荐文章于 2023-02-17 14:28:10 发布
最新推荐文章于 2023-02-17 14:28:10 发布
阅读量1.4k 收藏 4
点赞数
分类专栏： vue
--
本文链接：https://blog.csdn.net/qq_42177478/article/details/105180473
版权

功能：输入框中输入名字中的一个字可进行筛选，点击男女也可进行筛选

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="app">
            <div class="control">
                <input type="text" class="search" v-model = "filterText">
                <div>
                     <span 
                        class="option"
                        v-for = "(option,index) in controlOptions"
                        :class = "{
                            'active' : optionActive[index]
                        }"
                        @click = "filterbySex(index,option)"

                     >
                       {{ option }}
                    </span>
                </div>
            </div>
                <ul>
                    <li class="person"
                     v-for = "person in personList"
                     :key = "person.id"
                    >
                        <div class="avatar"> 
                            <img :src="person.src" :alt="person.des">
                        </div>
                        <div class="content">
                            <span class="name">{{ person.name }}</span>
                            <span class="des">{{ person.des }}</span>
                        </div>
                    </li>
                </ul>
            </div>
    <script>

        const vm = new Vue({
            el:'#app',
            data:{
                controlOptions:['MALE','FEMALE','ALL'],
                optionActive:[false,false,true],
                filterText:'',
                addClassFlag:false,
                sex:['f','m'],

                personArr: [
  { 
    name: '王俊凯', 
    src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4005587090,2408158268&fm=26&gp=0.jpg', 
    des: '颈椎不好', 
    sex: 'f', 
    id: '056482' 
  },
  { 
    name: '刘欣欣', 
    src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571915784984&di=a0056fd06188e87b922c60878e5ce6e2&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F79%2F64%2F5c05df1faf3b7_610.jpg', 
    des: '我是谁', 
    sex: 'm', 
    id: '157894' 
  },
  { 
    name: '李泽辰', 
    src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571915803971&di=47dc968f55b16a461de3e8f25bdf8600&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2016%2F11%2F27%2F190426198344.jpg', des: '我长得很好看', 
    sex: 'f', 
    id: '2849245' 
  },
  { 
    name: '卡卡', 
    src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571915748758&di=5be825da4d37bcc21959946c101d5609&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F19%2F20170719211350_4PnBt.jpeg', 
    des: '你没有见过陌生的脸', 
    sex: 'f', 
    id: '348515' 
  },
  { 
    name: '静静', 
    src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571915762633&di=49517ca62ecddb638cdfb2158a64e39a&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201702%2F05%2F20170205222154_WLdJS.jpeg', 
    des: '瓜皮刘', 
    sex: 'm', 
    id: '478454'
  }
],
            },
            methods:{
                filterbySex(index,option){
                    if(this.optionActive[index]){
                        return;
                    }
                    for(let i = 0;i<this.optionActive.length;i++){
                        this.optionActive[i] = false;
                    }
                    this.optionActive.splice(index,1,true)
                    this.sex.length = 0;
                    switch(option){
                        case 'MALE':
                        this.sex.push('m');
                        break;
                        case 'FEMALE':
                        this.sex.push('f');
                        break;
                        case 'ALL':
                        this.sex.push('m','f');
                    }

                }
            },
    computed:{
    personList(){
        // const personArr = this.personArr;
        // const filterText = this.filterText;
        const{ personArr, filterText,sex} = this;
        return personArr.filter(item => item.name.includes(filterText) && sex.includes(item.sex))
            // return true
      }
}
 })
    </script>
    
</body>
</html>

* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
  }
  #app {
    width: 500px;
    padding: 10px;;
    margin: 30px auto;
  }
  
  .control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .control .search {
    display: inline-block;
    width: 300px;
    height: 25px;
    padding-left: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }
  
  .control .option {
    color: #3e86f4;
    font-size: 14px;
    margin-left: 10px;
    padding: 0 5px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .control .option.active {
    color: #fff;
    background-color: #3e86f4;
  }
  
  
  .person {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid #ccc;
  }
  
  .avatar {
    margin-right: 10px;
    vertical-align: middle;
  }
  
  .avatar img {
    width: 50px;
    height: 50px;
  }
  
  .content {
    display: flex;
    flex-direction: column;
  }
  
  .content .des {
    color: #aaa;
    font-size: 10px;
    margin-top: 5px;
  }
啥时候能干全栈
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现简单学生信息管理
10-15
在这个项目中，开发者利用Vue.js的数据绑定、事件处理和指令系统来实现学生信息的增删查改功能。 首先，HTML结构包含一个表单用于输入学生信息，包括学号和姓名，以及一个添加按钮。还有一个搜索框，允许用户通过...
【源码讲解】VUE实现微信样式的多个用户快速选择和操作组件
serfend's blog
04-25 796
文章目录实现了任意人数用户的grid布局和自定义选取，首先看效果源码解析组件源码和调用方式组件实现调用方式事件传递优化版本参考文档 实现了任意人数用户的grid布局和自定义选取，首先看效果 基本效果 支持对选择的人员进行回调，当有人被选中的时候，弹出编辑按钮，并且emit编辑事件 源码解析 整体实现：基于vue-element2的基础组件实现，也可以替换为用户实际使用的ui框架 人员头像组件 通过检查用户传入的id，从api中获取对应的用户信息和头像，并显示到页面中。 注意头像组件调用
vue姓名筛选模糊搜索
努力变好
10-30 1442
1、名字筛选功能主要运用了计算属性关键词:computed 2、效果图 输入“六”关键字显示名字带“六”的所有名字 3、代码（vue.js记得修改目录） 用到的数据： list: [ {name: '张三', sex: '女', age: 19, phone: '18921212121'}, {name: '李四', sex: '男', age: 29, phone: '18921221121'}, {name: '王五', sex: '女', age: .
vue实现多选、全选功能
C_hydar的博客
08-19 8257
<!-- template --> <span class="title" v-if="clickAll" @click="clearCheck">取消</span> <span class="title" v-else @click="checkAll">全选</span> <div class="one-item" v-for...
vue中实现点击右侧图标显示全部姓名身份证和隐藏中间部分内容
weixin_49203377的博客
02-17 882
vue实现点击右边图标显示或隐藏中间部分内容
Vue 批量操作 多选框
飞翔的企鹅的博客
12-29 1364
在方法中通过this.$refs.table.selection获取选中的几行数据的数组，对数组元素遍历获取id值存储进ids实例中，再通过接口请求将数据发送给后端。后端直接通过ArrayList获取前端传递的json数组对象。创建一个存储id的实例数组。实现批量操作的核心属性。
基于ssm+vue实现的人力资源管理系统
最新发布
06-09
员工信息管理：系统支持员工基本信息的录入、查询、修改和删除，包括姓名、职位、联系方式等，实现员工档案的数字化管理。 招聘管理：提供招聘职位的发布、简历收集、简历筛选和面试安排等功能，帮助企业快速找到...
基于SpringBoot+vue实现的实验室管理系统源码+项目说明.zip
01-08
1、基于SpringBoot+vue实现的实验室管理系统源码+项目说明.zip 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料...
vue + element 表格内容筛选、表格列展示隐藏
05-13
以上就是使用Vue.js和Element UI实现表格内容筛选和表格列展示隐藏的基本方法。在实际项目中，可以根据具体需求进行更复杂的定制，比如添加多列筛选、动态加载列等。在提供的`scoreMaintenance.vue`和`SelectHeader....
利用vue + element实现表格分页和前端搜索的方法
10-18
Vue.js结合Element UI，能够帮助开发者高效地实现这些功能。Element UI是饿了么推出的一款基于Vue.js的UI组件库，它提供了丰富的组件，如表格（Table）、分页（Pagination）和输入框（Input）等，方便构建美观且实用...
Vue：实现一组按钮的多选功能
qq_37899622的博客
11-16 3209
<template> <div id="history-settings"> <v-toolbar color="#F9FAFD" dark class="toolbar-card" style="height: 80px;"> <v-toolbar-title style="font-size: 24px; font-weight: 600; line-height: 32px; height: 32px; color: #161A40;
vue中实现全选多选
WebDestiny的博客
09-17 3923
一、给全选框绑定点击事件 HTML： <div class="fixedLef" @click="chooseAllCart"> <input type="checkbox" :checked="chooseAll" name id /> <p>全选</p> </div> JS： chooseAllC...
Vue_姓名案例多种方式实现（插值语法、methods、computed、watch）
qq_45803094的博客
08-31 534
插值语法、定义方法、计算属性、监视属性等方式实现姓名案例
vue 移动端制作筛选，可多选、单选、重置
MYuanFang的博客
03-13 1858
直接上代码，我这边用的是cube-ui的弹窗，内容是自定义的，写完有点后悔了，没自己写弹出框，因为这样搭配用麻烦，标签里面循环的都是数组对象。 <cube-page type="drawer-def" title="Drawer"> <div slot="content" class="ViewsScreen"> <div cl...
【Vue】单选框、复选框的实现
qq_43515448的博客
07-02 4746
说是Vue其实和原生并没有太大的区别。 单选框研究 原生html的单选框实现 用name属性来划分单选框小组 总结一下就是四个属性 type （单选框：radio，复选框：checkbox） id value name/v-model(Vue) 点击label联动单选框实现效果 label中的for属性要和input中的id匹配 <input type="radio" id="g" value="坂田银时" name="favourite-character"> <label
vue绑定单选框（radio）和复选框（CheckBox）
Baymax
03-13 5507
html部分 &lt;div style="width:500px;margin:50px auto;display:flex;flex-direction:column;"&gt; &lt;div style="font-weight:600;font-size:18px"&gt;问卷调查&lt;/div&gt; &lt;div v-for...
vue 数组的筛选
qq_42039912的博客
07-10 2081
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="inputValue"><button v-on:click="searchName.
vue显示性别0、1为男、女。filter过滤器方法
热门推荐
monody666的博客
02-26 1万+
<el-table-column prop="salarySex" label="性别" align="center"> <template slot-scope="scope"> <!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 用|分割，前面获取传给后面，然后通过filters获取 --> .
el-select 男女性别绑定
wwf1225的博客
03-16 1790
<el-form-itemlabel="性别"> <el-selectplaceholder=""v-model="form.sex"> <el-optionlabel="男":value="1"></el-option> <el-optionlabel="女":value="0"></el-option>...
vue前端实现筛选功能
05-24
Vue前端实现筛选功能可以通过以下步骤实现： 1. 在Vue组件中定义一个data对象，用于存储筛选条件和筛选结果。 ```javascript data() { return { filter: { name: '', age: '', gender: '' }, filteredData: [] } } ``` 2. 在模板中添加筛选条件输入框和按钮，并绑定到data中的属性。 ```html <div> <label>姓名：</label> <input type="text" v-model="filter.name"> </div> <div> <label>年龄：</label> <input type="number" v-model="filter.age"> </div> <div> <label>性别：</label> <select v-model="filter.gender"> <option value="">请选择</option> <option value="male">男</option> <option value="female">女</option> </select> </div> <button @click="filterData">筛选</button> ``` 3. 在Vue组件的方法中实现筛选逻辑，根据筛选条件过滤数据。 ```javascript methods: { filterData() { this.filteredData = this.data.filter(item => { let valid = true; if (this.filter.name && item.name.indexOf(this.filter.name) === -1) { valid = false; } if (this.filter.age && item.age !== Number(this.filter.age)) { valid = false; } if (this.filter.gender && item.gender !== this.filter.gender) { valid = false; } return valid; }); } } ``` 4. 在模板中展示筛选结果。 ```html <ul> <li v-for="item in filteredData" :key="item.id"> {{ item.name }} - {{ item.age }} - {{ item.gender }} </li> </ul> ``` 完整代码如下： ```html <template> <div> <div> <label>姓名：</label> <input type="text" v-model="filter.name"> </div> <div> <label>年龄：</label> <input type="number" v-model="filter.age"> </div> <div> <label>性别：</label> <select v-model="filter.gender"> <option value="">请选择</option> <option value="male">男</option> <option value="female">女</option> </select> </div> <button @click="filterData">筛选</button> <ul> <li v-for="item in filteredData" :key="item.id"> {{ item.name }} - {{ item.age }} - {{ item.gender }} </li> </ul> </div> </template> <script> export default { data() { return { data: [ { id: 1, name: '张三', age: 20, gender: 'male' }, { id: 2, name: '李四', age: 25, gender: 'male' }, { id: 3, name: '王五', age: 30, gender: 'female' }, { id: 4, name: '赵六', age: 35, gender: 'male' }, { id: 5, name: '钱七', age: 40, gender: 'female' }, ], filter: { name: '', age: '', gender: '' }, filteredData: [] } }, methods: { filterData() { this.filteredData = this.data.filter(item => { let valid = true; if (this.filter.name && item.name.indexOf(this.filter.name) === -1) { valid = false; } if (this.filter.age && item.age !== Number(this.filter.age)) { valid = false; } if (this.filter.gender && item.gender !== this.filter.gender) { valid = false; } return valid; }); } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值