vue input输入框模糊查询的示例代码


Posted in Javascript onMay 22, 2018

Vue 模糊查询功能

原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串,则返回 -1。

input输入框,模糊查询

<template>
 <div>
  <input type="text" placeholder="请输入..." v-model="searchVal">
  <ul>
   <li v-for="(item,index) in NewItems" :key="index" :value="item.value" v-text="item.name"></li>
  </ul>
 </div>
</template>
<script>
export default {
 name: "HelloWorld",
 data() {
  return {
   searchVal: "",
   items: [
    {
     name: "上海",
     value: "sh"
    },
    {
     name: "北京",
     value: "bj"
    },
    {
     name: "重庆",
     value: "cq"
    },
    {
     name: "嗨嗨嗨",
     value: "hhh"
    },
    {
     name: "海上",
     value: "hs"
    },
    {
     name: "京都",
     value: "jd"
    }
   ]
  };
 },
 methods: {},
 computed: {
  NewItems() {
   var _this = this;
   var NewItems = [];
   this.items.map(function(item) {
    if (item.name.search(_this.searchVal) != -1) {
     NewItems.push(item);
    }
   });
   return NewItems;
  }
 }
};
</script>

效果如下:

vue input输入框模糊查询的示例代码

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

Javascript 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
vue 中swiper的使用教程
May 22 #Javascript
vue配置多页面的实现方法
May 22 #Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 #Javascript
详解js类型判断
May 22 #Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 #Javascript
swiper 自动图片无限轮播实现代码
May 21 #Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 #Javascript
You might like
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
javascript eval函数深入认识
2009/02/21 Javascript
Prototype String对象 学习
2009/07/19 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
vue实现购物车列表
2020/06/30 Javascript
详解Python命令行解析工具Argparse
2016/04/20 Python
Python中防止sql注入的方法详解
2017/02/25 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
通过代码实例了解Python sys模块
2020/09/14 Python
GC是什么?为什么要有GC?
2013/12/08 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
青春演讲稿范文
2014/05/08 职场文书
调研汇报材料范文
2014/08/17 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
房屋过户委托书范本
2014/10/07 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
幼儿园六一主持词
2015/06/30 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
Python实现信息管理系统
2022/06/05 Python