vue input输入框模糊查询的示例代码
2018-05-22 09:46
1141 查看
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>
效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 星座查询演示示例代码
- pm2.5接口,城市pm2.5指数查询接口调用代码示例
- oracle模糊查询语句使用示例
- 编写简易的JS输入框模糊查询匹配(附有源码和demo)
- 通讯服务类API调用的代码示例合集:短信服务、手机号归属地查询、电信基站查询等
- Oracle多表查询优化的代码示例
- eoLinker-API_Shop_位置信息类API调用的代码示例合集:中国省市区查询等
- asp.net利用存储过程实现模糊查询示例分享
- 最新用php获取谷歌PR值算法,附上php查询PR值代码示例
- spring data jpa分页查询示例代码
- JS输入框,模糊查询。显示模糊下拉列表
- Soql代码实例一般的数据展示到模糊查询
- Javascript做模糊查询-数组无双(三)-最终代码
- EntityFramework 执行SQL语句进行参数化查询代码示例
- asp.net利用存储过程实现模糊查询示例分享
- eoLinker-API_Shop_天气类API调用的代码示例合集:全国天气预报、实时空气质量数据查询、PM2.5空气质量指数等
- 尾号限行api,单双号限行查询数据库接口调用代码示例
- PHP+MySQL实现模糊查询员工信息功能示例
- hive进阶 | 数据的导入、数据查询、Java客户端详解+代码示例
- 星座查询演示示例代码