前段搜索框不请求接口隐藏数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了前段搜索框不请求接口隐藏数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目介绍：uview-ui 1.x的，并且使用语言切换功能（i18n，hbuilder新建项目选择i18n项目），因为是h5项目，所以使用location.reload()进行刷新
效果图：
前段搜索框不请求接口隐藏数据

主要判断在 v-if=“!keyword || item.text.indexOf(keyword) != -1”

<!-- 语言 -->
<template>
	<view>
		<view class="plr-30">
			<view class="mt-20 pb-30">
				<u-search placeholder="搜索支持语言" v-model="keyword" bg-color="#F7F7FA" :show-action="false"></u-search>
			</view>
			<view v-for="(item,index) in languageList" :key="index">
				<view class="language-item flex align-center justify-sb" v-if="!keyword || item.text.indexOf(keyword) != -1"  @click="changeLanguage(item)">
					<view class="f30 text-333">
						{{item.text}}
					</view>
					<u-image v-show="item.check" src="/static/user/lan-check.png" width="34rpx" height="34rpx"></u-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keyword:'',
				languageList:[
					{text:'English',code:'en',check:false},
					{text:'简体中文',code:'zh-CN',check:false},
					{text:'繁体中文',code:'zh-HK',check:false},
				],
			}
		},
		onLoad() {
			let applicationLocale = uni.getLocale();
			this.languageList.forEach((item,index)=>{
				if(item.code == applicationLocale){
					item.check = true
				}
			})
		},
		methods:{
			changeLanguage(item){
				if(!item.check){
					uni.setLocale(item.code);
					this.$i18n.locale = item.code;
					location.reload()
				}
			}
		}
	}
</script>

<style lang="scss">
	.language-item{
		height: 80rpx;
		&-check{
			width: 34rpx;
			height: 34rpx;
			
		}
	}
</style>

适用条件：一次性请求到所有数据条件下的搜索，分页可能会有点问题（项目未遇到）
ps：如果要适用字母大小写的，在indexOf里改成keyword.toUpperCase()，直接替换成全部大写，具体情况具体分析文章来源地址https://www.toymoban.com/news/detail-510921.html

到了这里，关于前段搜索框不请求接口隐藏数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！