el-option v-for下下拉选中图片回显图片
时间: 2023-07-11 07:00:18 浏览: 50
要实现下拉选项中选中后显示图片的功能,可以使用element-ui中的el-select组件和el-option组件,结合v-for指令进行渲染。具体实现步骤如下:
1.在el-select组件中设置v-model绑定选中的值,同时设置@change事件监听选中的值变化。
2.使用el-option组件进行下拉选项的渲染,同时设置v-for指令遍历图片数据数组,将每个图片的url作为el-option的value值,将图片的名称作为el-option的label值。
3.在@change事件中,通过v-model绑定的选中值,找到对应的图片url,并将其赋值给一个data中的变量selectedImageUrl。
4.最后,在页面中展示选中的图片,可以使用img标签并绑定src属性为selectedImageUrl。
下面是一个示例代码:
```html
<template>
<div>
<el-select v-model="selectedImage" @change="handleChange">
<el-option v-for="image in images" :key="image.id" :value="image.url" :label="image.name"></el-option>
</el-select>
<img :src="selectedImageUrl" v-if="selectedImageUrl">
</div>
</template>
<script>
export default {
data() {
return {
images: [
{ id: 1, name: '图片1', url: 'http://example.com/image1.jpg' },
{ id: 2, name: '图片2', url: 'http://example.com/image2.jpg' },
{ id: 3, name: '图片3', url: 'http://example.com/image3.jpg' }
],
selectedImage: '',
selectedImageUrl: ''
}
},
methods: {
handleChange() {
// 根据选中的值找到对应的图片url
const selectedImage = this.images.find(image => image.url === this.selectedImage)
if (selectedImage) {
this.selectedImageUrl = selectedImage.url
} else {
this.selectedImageUrl = ''
}
}
}
}
</script>
```