富贵资源网 Design By www.hznty.com
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>
效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...