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+Ajax+Json的高效分页实现代码
Oct 29 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
js实现新年倒计时效果
Dec 10 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
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排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
Vue 自定义指令功能完整实例
2019/09/17 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
对Django中内置的User模型实例详解
2019/08/16 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
获奖的大学生创业计划书
2014/01/05 职场文书
促销活动策划方案
2014/01/12 职场文书
个人总结与自我评价
2014/09/18 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
大国崛起观后感
2015/06/02 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
python模板入门教程之flask Jinja
2022/04/11 Python