300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > Vue 最简单的实现input 输入框的模糊查询(不使用后端接口)

Vue 最简单的实现input 输入框的模糊查询(不使用后端接口)

时间:2018-07-12 08:14:04

相关推荐

Vue  最简单的实现input 输入框的模糊查询(不使用后端接口)

Vue 模糊查询功能

原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串,则返回 -1。

1. input输入框

<el-input placeholder="请您输入地址" v-model="value"></el-input><i class="el-icon-search" @click="searchAdress"></i>

2. 循环的数据

<ul><li v-for="(item,index) in NewItems" :key="index" v-text="item.name"></li></ul>

<script>export default {data() {return {value: "",NewItems: [{name: "上海" },{name: "北京" },{name: "重庆" }]};},methods: {searchAdress () {var _this = this;var NewItems = [];this.NewItems.map(function (item) {if (item.name.search(_this.value.trim()) != -1) {NewItems.push(item);console.log(NewItems);}});this.NewItems = [];this.NewItems = NewItems;return NewItems;}},};</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。