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