当前位置: 首页 > news >正文

前端uniapp图片select联动文本切换

图片

请添加图片描述

代码

<template><!-- 这个是uniapp的下拉框 --><uni-data-select v-model="pay_type" :localdata="range" @change="handleSelectChange"></uni-data-select><!-- 图片 --><image :src="dynamicImage" mode="" @click="getImg"></image><!-- 文字 -->{{rangeModelData}}凭证
</template><script>export default {data() {return {// 用于绑定el-select的值dynamicImage: '',// 用于显示动态绑定的图像imgArr: [], // 取值imgArr[0] 接口获取下来的,一共两个图片路径// 动态绑定文字切换rangeModelData: '',rangeModelList: ['微信', '支付宝'],};},mounted() {/* 获取图片 两条路径*/this.getConsumptionsNumber();},methods: {// 获取图片 两条路径getConsumptionsNumber() {let self = this;self.loading = true;uni.showLoading({title: '加载中'})self._get('balance.plan/index', {pay_source: self.getPlatform()},function(data) {// 获取收款码图片console.log(data.data.settings, '获取图片');// push到数组里面data的 imgArr[],一共两条图片路径self.imgArr.push(data.data.settings.poster_path, data.data.settings.zfb_poster_path)console.log(self.imgArr, 'self.imgArr地址');});},handleSelectChange(newValue) {// 图片切换 在这里根据选项的值(newValue)来设置dynamicImage的值 // 例如,根据选项值加载不同的图像if (newValue === 1) {this.dynamicImage = this.imgArr[0];} else if (newValue === 2) {this.dynamicImage = this.imgArr[1];}// 文字切换if (newValue === 1) {this.rangeModelData = this.rangeModelList[0];} else if (newValue === 2) {this.rangeModelData = this.rangeModelList[1];}}},watch: {//  进入页面立即执行 图片首次加载数组第一张显示图片"imgArr": {handler: function(o, n) {console.log(o, n);this.dynamicImage = this.imgArr[0];},deep: true, // 深度监听immediate: true, // 立即执行},// 进入页面立即执行 文字首次加载数组第一个文字"rangeModelList": {handler: function(o, n) {console.log(o, n);this.rangeModelData = this.rangeModelList[0];},deep: true, // 深度监听immediate: true, // 立即执行},}
</script><style>
</style><template><el-select v-model="selectedValue" @change="handleSelectChange"><!-- 添加el-option选项 --><el-option label="选项1" value="option1"></el-option><el-option label="选项2" value="option2"></el-option> <!-- 添加更多选项 --></el-select><img :src="dynamicImage" alt="动态图像">
</template><script>export default {data() {return {selectedValue: '',// 用于绑定el-select的值 dynamicImage: '',// 用于显示动态绑定的图像};},methods: {handleSelectChange(newValue) {// 在这里根据选项的值(newValue)来设置dynamicImage的值 // 例如,根据选项值加载不同的图像 if (newValue === 'option1') {this.dynamicImage = '路径/到/选项1的图像.png';} else if (newValue === 'option2') {this.dynamicImage = '路径/到/选项2的图像.png';} // 添加更多选项的处理逻辑 } }}
</script><style>
</style>

相关文章:

前端uniapp图片select联动文本切换

图片 代码 <template><!-- 这个是uniapp的下拉框 --><uni-data-select v-model"pay_type" :localdata"range" change"handleSelectChange"></uni-data-select><!-- 图片 --><image :src"dynamicImage&qu…...

java - 包装类

目录 前言 一 什么是包装类? 1.获取包装类的两种方式(了解)(已经淘汰) 2.两种方式获取对象的区别(掌握) 3.自动装箱&&自动装箱 4.Integer常用方法 总结 前言 大家好,今天给大家讲解一下包装类 一 什么是包装类? 在Java中&#xff0c;每个基本数据类型都有对应…...

防火墙基础

目录 1、 防火墙支持那些NAT技术&#xff0c;主要应用场景是什么&#xff1f; 2、当内网PC通过公网域名解析访问内网服务器时&#xff0c;会存在什么问题&#xff0c;如何解决&#xff1f; 3、防火墙使用VRRP实现双机热备时会遇到什么问题&#xff0c;如何解决&#xff1f; 4…...

服务断路器_Resilience4j的断路器

断路器&#xff08;CircuitBreaker&#xff09;相对于前面几个熔断机制更复杂&#xff0c;CircuitBreaker通常存在三种状态&#xff08;CLOSE、OPEN、HALF_OPEN&#xff09;&#xff0c;并通过一个时间或数量窗口来记录当前的请求成功率或慢速率&#xff0c;从而根据这些指标来…...

微信小程序学习笔记3.0

第3章 资讯类:仿今日头条微信小程序 3.1 需求描述及交互分析 需求描述 仿今日头条微信小程序,要具有以下功能。 (1)首页新闻频道框架设计,包括底部标签导航设计、新闻检索框设计及新闻频道滑动效果设计。 (2)首页新闻内容设计,包括新闻标题、新闻图片及新闻评论设计…...

nginx 反向代理 负载均衡 动静分离

一样东西的诞生通常都是为了解决某些问题&#xff0c;对于 Nginx 而言&#xff0c;也是如此。 比如&#xff0c;你出于无聊写了一个小网站&#xff0c;部署到 tomcat 之后可以正常访问 但是后来&#xff0c;你的这个小网站因为内容很诱人逐步的火了&#xff0c;用户越来越多&a…...

Codeanalysis(tca)后端二次开发环境搭建

先试用官方脚本文件件quick_install.sh将整个项目启动起来&#xff0c;然后到每个微服务下查看每个服务的pid进程&#xff0c;需要调试哪个先把对应的微服务关闭手动启动&#xff0c;具体启动流程如下&#xff1a; cd 到项目根目录下 source script\config.sh # 激活系统环境…...

JS前端树形Tree数据结构使用

前端开发中会经常用到树形结构数据&#xff0c;如多级菜单、商品的多级分类等。数据库的设计和存储都是扁平结构&#xff0c;就会用到各种Tree树结构的转换操作&#xff0c;本文就尝试全面总结一下。 如下示例数据&#xff0c;关键字段id为唯一标识&#xff0c;pid为父级id&am…...

Automation Anywhere推出新的生成式AI自动化平台,加速提高企业生产力

在9 月 19 日的Imagine 2023 大会上&#xff0c;智能自动化领域的领导者 Automation Anywhere 宣布对其自动化平台进行扩展。推出了新的 Responsible AI Layer&#xff0c;并宣布了四项关键产品更新&#xff0c;包括全新的 Autopilot&#xff0c;它可以利用生成式 AI &#xff…...

电缆隧道在线监测系统:提升电力设施安全与效率的关键

随着城市化进程的加快&#xff0c;电力电缆隧道在保障城市电力供应方面的地位日益重要。然而&#xff0c;电缆隧道环境复杂&#xff0c;容易受到多种因素影响&#xff0c;如温度、湿度、烟雾、水位等&#xff0c;严重威胁电力设施的安全与稳定运行。在此背景下&#xff0c;电缆…...

Java BigDecimal 详解

目录 一、BigDecimal 1、简介 2、构造器描述 3、方法描述 4、使用 一、BigDecimal float和double类型的主要设计目标是为了科学计算和工程计算。他们执行二进制浮点运算&#xff0c;这是为了在广域数值范围上提供较为精确的快速近似计算而精心设计的。然而&#xff0c;它…...

简述信息论与采样定理

信息论 香农信息论发表于1948/1949年&#xff0c;它由三部分组成&#xff1a;信号采样、信源编码、信道编码&#xff1b; 信号采样&#xff1a;采样理论研究在何种条件下对连续信号进行采样&#xff0c;从而得到的离散型号可以可逆地恢复出采样前的连续信号。采样得到的离散实…...

网络安全之网站常见的攻击方式

这是作者自学的哈&#xff0c;不算课程内容。 网页中出现大量黑链 网站看着很正常&#xff0c;但是会隐藏一些链接。网页的链接几乎都是标签&#xff0c;这种黑链就是通过链接标签<a></a>或者script在里面链入恶意脚本&#xff0c;等待浏览者的访问&#xff0c;通…...

iOS Swift 拍照识别数字(Recognizing Text in Images)

可以用腾讯云 OCR的iOS demo - 腾讯云 苹果官方的解决方案&#xff08;识别度太低&#xff09; Recognizing Text in Images - apple developer Extracting phone numbers from text in images(Sample Code) - apple developer import UIKit import Visionclass ViewContro…...

数学建模:智能优化算法及其python实现

数学建模:智能优化算法及其python实现 智能优化算法简介差分进化算法(Differential Evolution,DE)遗传算法(Genetic Algorithm,GA)粒子群优化算法(Particle Swarm Optimization,PSO)模拟退火算法(Simulated Annealing,SA)蚁群算法(Ant Colony Optimization,ACO)…...

monkeyrunner环境搭建和初步用法

一、打开模拟器 运行monkeyrunner之前必须先运行相应的模拟器&#xff0c;不然monkeyrunner无法连接设备。 用Elipse打开Android模拟器或在CMD中用Android命令打开模拟器。这里重点讲一下在CMD中用Android命令打开模拟器 命令&#xff1a;emulator -avd test &#xff08;注…...

2024华为校招面试真题汇总及其解答(一)

1. 我问你点java基础的问题吧,你平时都用什么集合啊,都什么情况下使用 在 Java 中,常用的集合有以下几种: List:有序集合,可以重复,常用实现类有 ArrayList、LinkedList、Vector。Set:无序集合,不能重复,常用实现类有 HashSet、TreeSet。Map:键值对集合,键不能重复…...

css调整字体间距 以及让倾斜字体

调整字体间距 .element {letter-spacing: 2px; /* 调整为适当的值 */ }倾斜字体1 .element {font-style: italic; }请注意&#xff0c;不是所有的字体都有斜体样式可用。如果字体本身没有斜体版本&#xff0c;则可能无法实现完全的斜体效果。 倾斜字体2 <span class"…...

工具篇 | Gradle入门与使用指南 - 附Github仓库地址

介绍 1.1 什么是Gradle&#xff1f; Gradle是一个开源构建自动化工具&#xff0c;专为大型项目设计。它基于DSL&#xff08;领域特定语言&#xff09;编写&#xff0c;该语言是用Groovy编写的&#xff0c;使得构建脚本更加简洁和强大。Gradle不仅可以构建Java应用程序&#x…...

使用 Python 函数callable和isinstance的意义

一、说明 在这篇博客中&#xff0c;我们将探讨两个python函数&#xff1a;1 callable 中的函数及其有趣的应用程序。该callable函数用于检查对象是否可调用&#xff0c;这意味着它可以作为函数调用。2 isinstance这个内置函数允许我们比较两种不同的数据类型并确定它们是否相…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...