这次给大家带来如何实现vue input输入框模糊查询，实现vue input输入框模糊查询的注意事项有哪些，下面就是实战案例，一起来看一下。
vue 模糊查询功能
原理：原生js的search() 方法，用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。
input输入框，模糊查询
<template>
<p>
<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>
</p>
</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>
效果如下：
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样进行mpvue小程序项目搭建
vue2.0中jsonp使用步奏详解
以上就是如何实现vue input输入框模糊查询的详细内容。