前端js动态切换图片文字

参考案例1

<template>
	<el-select v-model="selectedValue" @change="handleSelectChange">
		
		<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

uniapp案例2

<template>

	
	<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92