html输入框模糊查询,vue input输入框模糊查询的示例代码
时间: 2023-10-26 12:02:27 浏览: 52
以下是一个基于Vue的输入框模糊查询示例代码:
```html
<template>
<div>
<input type="text" v-model="searchText" placeholder="请输入查询关键字">
<ul>
<li v-for="item in filteredItems">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ["苹果", "香蕉", "橘子", "西瓜", "菠萝"],
searchText: ""
};
},
computed: {
filteredItems() {
return this.items.filter(item => {
return item.toLowerCase().includes(this.searchText.toLowerCase());
});
}
}
};
</script>
```
在上面的代码中,我们使用了一个 `computed` 属性来实现模糊查询。当用户在输入框中输入关键字时,`filteredItems` 属性会根据输入的关键字动态过滤出匹配的项,并在页面上进行展示。
相关问题
vue实现输入框模糊查询
以下是使用Vue实现输入框模糊查询的代码示例:
```html
<template>
<div>
<input type="text" v-model="searchText" @input="search" placeholder="请输入搜索内容">
<ul>
<li v-for="(item, index) in searchResult" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
dataList: ['apple', 'banana', 'orange', 'pear'],
searchResult: []
}
},
methods: {
search() {
this.searchResult = this.dataList.filter(item => {
return item.indexOf(this.searchText) !== -1
})
}
}
}
</script>
```
在上述代码中,我们首先在模板中定义了一个输入框和一个用于展示搜索结果的列表。然后在Vue实例的data选项中定义了三个变量:searchText表示输入框中的搜索内容,dataList表示原始数据列表,searchResult表示搜索结果列表。
接着,在methods选项中定义了一个名为search的方法,该方法会在输入框内容发生变化时被调用。在search方法中,我们使用了数组的filter方法对原始数据列表进行过滤,只保留包含搜索内容的元素,并将结果赋值给searchResult变量,从而实现了输入框的模糊查询功能。
vue进行输入框模糊查询
可以使用Vue的computed属性和v-model双向绑定实现输入框模糊查询。
首先,需要在data中定义一个数组用来存储所有数据,以及一个字符串用来存储查询关键字:
```javascript
data() {
return {
dataList: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
],
keyword: ''
}
}
```
然后,在模板中使用v-model双向绑定输入框的值:
```html
<input v-model="keyword" />
```
接着,在computed属性中使用filter方法过滤出符合条件的数据:
```javascript
computed: {
filteredList() {
return this.dataList.filter(item => {
return item.name.indexOf(this.keyword) !== -1
})
}
}
```
最后,在模板中使用v-for循环展示过滤后的数据:
```html
<ul>
<li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>
```
完整代码示例:
```html
<template>
<div>
<input v-model="keyword" />
<ul>
<li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
],
keyword: ''
}
},
computed: {
filteredList() {
return this.dataList.filter(item => {
return item.name.indexOf(this.keyword) !== -1
})
}
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)