前端js动态切换图片文字

这篇具有很好参考价值的文章主要介绍了前端js动态切换图片文字。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参考案例1

<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案例2

<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>

文章来源地址https://www.toymoban.com/news/detail-702989.html

到了这里,关于前端js动态切换图片文字的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包