在使用uview组件库时实现字符匹配弹出对应图片

HTML部分： 

<u-overlay :show="show" @click="closeSeat">
	<view class="warp">
	    <view class="rect">
		    <img v-for="(image, index) in seatImages" 
            :key="index" 
            :src="image" 
            alt="" 
            class="image" /> //遍历图片，使相应的图片显示出来
	    </view>
	</view>
</u-overlay>

js部分：

export default {
	data() {
		return {
			show: false, //是否展示位置图
			}
	},
	computed: {
			// 返回每个座位对应的图片路径
		seatImages() {
			const seatMap = {
				'1F-L': '/static/image/1F-left.png',
				'1F-R': '/static/image/1F-right.png',
				'2F-L': '/static/image/2F-left.png',
				'2F-R': '/static/image/2F-right.png',
				'3F-L': '/static/image/3F-left.png',
				'3F-R': '/static/image/3F-right.png',
			}
			return this.reserveListinfo.data.successful.map(item => {
				const seatPrefix = item.seatId.slice(0, 4)
				return seatMap[seatPrefix]
			}) //对所对接口里的数据数组进行遍历，用slice截取获取到相应的字符串并返回seatMap里相应的数组信息（即每个座位对应的图片路径）
		}
	},

后面再对image样式进行修改就可以了！