前端js动态切换图片文字-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端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>