前段搜索框不请求接口隐藏数据

news2024/10/7 4:35:02

项目介绍: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(),直接替换成全部大写,具体情况具体分析

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/706011.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Git 之 reset --hard 回退/回滚到之前的版本代码后,后悔了,如何在恢复之后的版本的方法简单整理

Git 之 reset --hard 回退/回滚到之前的版本代码后&#xff0c;后悔了&#xff0c;如何在恢复之后的版本的方法简单整理 目录 Git 之 reset --hard 回退/回滚到之前的版本代码后&#xff0c;后悔了&#xff0c;如何在恢复之后的版本的方法简单整理 一、简单介绍 二、操作步骤…

Redis是什么?(详细安装步骤)

一、Redis简介&#x1f349; 背景 在Web应用发展的初期&#xff0c;那时关系型数据库受到了较为广泛的关注和应用&#xff0c;原因是因为那时候Web站点基本上访问和并发不高、交互也较少。而在后来&#xff0c;随着访问量的提升&#xff0c;使用关系型数据库的Web站点多多少少…

代码随想录二刷 day38 | 动态规划之 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

day38 509. 斐波那契数1 确定dp数组以及下标的含义2 确定递推公式3 dp数组如何初始化4 确定遍历顺序5 举例推导dp数组 70. 爬楼梯1 确定dp数组以及下标的含义2 确定递推公式3 dp数组如何初始化4 确定遍历顺序5 举例推导dp数组 746. 使用最小花费爬楼梯1 确定dp数组以及下标的含…

Golang每日一练(leetDay0113) 奇偶链表、链表随机节点

目录 328. 奇偶链表 Odd Even Linked-list &#x1f31f;&#x1f31f; 382. 链表随机节点 Llinked-list Random Node &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Rust每日一练 专栏 Golang每日一练 专栏 Python每日一练 专栏 C/C每日…

docker安装php GD库

故事是这样的&#xff1a; 公司采购了一套商城源码&#xff0c;使用的是 TP5&#xff0c;同事先行&#xff0c;用宝塔部署到生产环境&#xff0c;运行正常。后面我忙完手里的项目&#xff0c;也加入其中&#xff0c;我本地使用的是 docker 当我部署好开始运行时&#xff0c;发…

初学mybatis(三)ResultMap及分页

学习回顾&#xff1a;初学mybatis&#xff08;二&#xff09; 一、查询为null问题 要解决的问题&#xff1a;属性名和字段名不一致 环境&#xff1a;新建一个项目&#xff0c;将之前的项目拷贝过来 1、查看之前的数据库的字段名 2、Java中的实体类设计 public class User {pri…

Redis各数据类型操作命令

一、Redis数据类型及命令 &#xff08;一&#xff09;String 类别命令描述命令示例备注取/赋值操作赋值set key valueset lclkey lclvalue取值 get keyget lclkey取值并赋值getset key valuegetset lclkey1 lclvalue1获取原值&#xff0c;并设置新的值仅当不存在时赋值setnx k…

服务器解析漏洞与cms靶场搭建教程

文章目录 一、解析漏洞定义二、Kali安装docker并搭建DVWA靶场三、Win7 IIS7漏洞复现四、BEES靶场搭建五、CPMS靶场搭建六、SDCMS靶场搭建 一、解析漏洞定义 解析漏洞主要是一些特殊文件被Apache、IIS、Nginx等Web服务器在某种情况下解释成脚本文件格式并得以执行而产生的漏洞 …

The Company Requires Superficial StudyPHP 变量的使用 ③

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; PHP MYSQL &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f44…

基于Java电动车租赁网站设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

信号链噪声分析20

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 所有模数转换器(ADC)都有一定量的“折合到输入端噪声”&#xff0c;可以将其模拟为与无噪声 ADC 输入串联的噪声源。折合到输入端噪声与量化噪声不同&#xff0c;后者仅在 ADC 处理交流 信号时出现。多数情况下&#x…

嵌入式中C++开发的基本操作方法

第一&#xff1a;面向对象 1、配置环境 虚拟机上网&#xff08;ping www.baidu.com&#xff09;sudo apt-get update //更新软件包sudo apt-get install -f //更新软件依赖sudo apt-get install g //安装c编译器 2、C发展 c98,第一版 c03,c11,c17 3、为什么学习C 4、面向对…

python包的研究

目录 json的方法timecollectionsdatetimetimestampsocket json的方法 json.load&#xff1a;表示读取文件&#xff0c;返回python对象 json.dump&#xff1a;表示写入文件&#xff0c;文件为json字符串格式&#xff0c;无返回 json.dumps&#xff1a;将python中的字典类型转换…

11-Vue常见优化手段

前言&#xff1a; 永远不要过早优化&#xff0c;见招拆招 使用key 对于通过循环生成的列表&#xff0c;应给每个列表项一个稳定且唯一的key,这有利于在列表变动时&#xff0c;尽量少的删除&#xff0c;新增&#xff0c;改动元素 index作为key值是唯一的&#xff0c;但不够稳…

STM32外设系列—sg90(舵机)

文章目录 一、sg90简介二、引脚连接三、控制方法四、程序设计4.1 配置定时器4.2 编写控制程序 五、360舵机 一、sg90简介 首先介绍说一下什么是舵机。舵机是一种位置&#xff08;角度&#xff09;伺服的驱动器。适用于一些需要角度不断变化的&#xff0c;可以保持的控制系统。…

threejs物理效果和声音

个人博客地址: https://cxx001.gitee.io 一、Threejs中如何创建物理场景 threejs中创建物理场景我们用它的扩展库&#xff1a;Physijs。它可以使场景中的对象有重力效果&#xff0c;可以相互碰撞&#xff0c;施加力之后可以移动&#xff0c;还可以通过合页和滑块在移动过程中…

LeetCode 打卡day44--完全背包问题及其应用

一个人的朝圣 — LeetCode打卡第44天 知识总结 Leetcode 518. 零钱兑换 II题目说明代码说明 Leetcode 377. 组合总和 Ⅳ题目说明代码说明 知识总结 今天结束了完全背包问题, 完全背包问题与01背包问题的区别在于可以无限次的使用物品的数量. 其和01背包的差别在于, 01背包先遍…

Leetcode-每日一题【707. 设计链表】

题目 你可以选择使用单链表或者双链表&#xff0c;设计并实现自己的链表。 单链表中的节点应该具备两个属性&#xff1a;val 和 next 。val 是当前节点的值&#xff0c;next 是指向下一个节点的指针/引用。 如果是双向链表&#xff0c;则还需要属性 prev 以指示链表中的上一…

Spring Boot 中的 @Id 注解是什么,原理,如何使用

Spring Boot 中的 Id 注解是什么&#xff0c;原理&#xff0c;如何使用 在 Spring Boot 中&#xff0c;Id 注解是一个非常重要的注解&#xff0c;它用于映射实体类中的主键字段。本文将介绍 Id 注解的作用、原理和使用方法。 1. Id 注解的作用 在 Spring Boot 中&#xff0c;…

shardingsphere-proxy 实现postgresql的分库分表

1、docker 安装zookeeper 1、拉取镜像 docker pull zookeeper2、运行容器 docker run -d -e TZ"Asia/Shanghai" -p 2181:2181 -v /home/sunyuhua/docker/zookeeper:/data --name zookeeper --restart always zookeeper3、查看容器是不是运行成功 docker exec -i…