在Vue.js中搜索大写或小写的方法有多种。以下是其中一种常见的方法:
<template>
<div>
<input type="text" v-model="searchText" placeholder="Search">
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
};
},
computed: {
filteredItems() {
return this.items.filter(item => {
return item.name.toLowerCase().includes(this.searchText.toLowerCase());
});
}
}
};
</script>
在上面的代码中,我们使用v-model
指令将输入框的值绑定到searchText
变量上。然后,我们使用computed
属性filteredItems
来过滤items
数组,只显示包含搜索文本的项目。通过使用toLowerCase()
方法,我们可以将搜索文本和项目名称都转换为小写,以实现不区分大小写的搜索。
<template>
<div>
<input type="text" v-model="searchText" placeholder="Search">
<ul>
<li v-for="item in items | filterItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
};
},
filters: {
filterItems(value) {
return value.filter(item => {
return item.name.toLowerCase().includes(this.searchText.toLowerCase());
});
}
}
};
</script>
在上面的代码中,我们定义了一个名为filterItems
的过滤器,它接收一个值(即items
数组)并返回过滤后的结果。在模板中,我们使用|
管道符号将items
数组传递给过滤器,并将过滤后的结果渲染到列表中。
这两种方法都可以实现在Vue.js中搜索大写或小写的功能。根据具体的需求和项目情况,选择适合的方法即可。
腾讯云相关产品和产品介绍链接地址:
以上是腾讯云相关产品的简介和链接,供参考。
领取专属 10元无门槛券
手把手带您无忧上云