這次帶給大家如何實現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>效果如下：
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是如何實作vue input輸入框模糊查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章！
