经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue实现多条件和模糊搜索功能
来源:jb51  时间:2019/5/28 10:28:09  对本文有异议

本文实例为大家分享了vue实现多条件和模糊搜索的具体代码,供大家参考,具体内容如下

html

  1. <div class="content">
  2. <div class="right">
  3.  
  4. <select name="sex" width='100' v-model="formData.sex">
  5. <option value="" selected>请选择</option>
  6. <option value="1"></option>
  7. <option value="2"></option>
  8. <option value="3">不是人</option>
  9. </select>
  10.  
  11. <input type="text" v-model="formData.phone" placeholder="电话(精准搜索)">
  12.  
  13. <input type="text" v-model="formData.name" placeholder="姓名(模糊搜索)">
  14.  
  15. <button @click="search(formData)">提交数据</button>
  16. </div>
  17. <div class="left">
  18. <ul>
  19. <li v-for="(item,index) in realList" :key="index">
  20. {{item.name}} || {{item.phone}} || {{item.sex | filterSex}}
  21. </li>
  22. </ul>
  23. </div>
  24. </div>

js

  1. export default {
  2. name: 'styleTest',
  3. data() {
  4. return {
  5. formData: {
  6. name: '',
  7. phone: '',
  8. sex: '',
  9. },
  10. realList: [],
  11. list: [
  12. {
  13. name: '张址',
  14. phone: 18715023011,
  15. sex: 1,
  16. },
  17. {
  18. name: '张三',
  19. phone: 18715023012,
  20. sex: 2,
  21. },
  22. {
  23. name: '李四',
  24. phone: 18715023013,
  25. sex: 1,
  26. },
  27. {
  28. name: '赵武',
  29. phone: 18715023014,
  30. sex: 2,
  31. },
  32. {
  33. name: '晋南',
  34. phone: 18715023015,
  35. sex: 1,
  36. },
  37. {
  38. name: '张东',
  39. phone: 18715023016,
  40. sex: 2,
  41. },
  42. ],
  43. };
  44. },
  45. filters: {
  46. filterSex(val) {
  47. switch (val) {
  48. case 1:
  49. return '男';
  50. break;
  51. case 2:
  52. return '女';
  53. break;
  54. case 3:
  55. return '不是人';
  56. break;
  57. default:
  58. return '男';
  59. }
  60. },
  61. },
  62. computed: {
  63. // realList() {
  64. // let { name, phone, sex } = this.formData;
  65. // if (name && phone && sex) {
  66. // return this.list;
  67. // }
  68. // },
  69. },
  70. created() {
  71. this.search({});
  72. },
  73. methods: {
  74. search({ name, phone, sex }) {
  75. this.realList = this.list.filter(item => {
  76. let matchName = true; // 姓名 筛选
  77. let matchSex = true; // 性别 筛选
  78. let matchPhone = true; // 号码 筛选
  79.  
  80. if (sex) {
  81. matchSex = item.sex == sex;
  82. }
  83.  
  84. if (phone) {
  85. // console.info(Object.prototype.toString.call(phone));
  86. matchPhone = item.phone == phone;
  87. }
  88.  
  89. if (name) {
  90. // 模糊搜索;
  91. const keys = name
  92. .toUpperCase() // 转大写
  93. .replace(' ', '') // 删掉空格
  94. .split(''); // 切割成 单个字
  95.  
  96. matchName = keys.every(key => item.name.toUpperCase().includes(key));
  97. }
  98. return matchName && matchPhone && matchSex;
  99. });
  100. },
  101. },
  102. };

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号