vue脚手架-上传图片 根据下拉框选择到的不同，显示不一样的图片内容（一）

根据下拉框选择的选项不同，展示出不一样的图片内容

此篇文章主要实现下拉款选择和图片连接起来以及添加和删除，下篇则是实现图片拖拽(draggable)和更新
效果：

·------------------------------------------------------------------------------------------------------------------------

此文章分为两部分来梳理（内含两者之间如何联系起来）：
1、下拉框
2、上传图片

该功能使用了element-ui插件来实现，看文章前推荐先去看看官网 ==》 下拉框 、上传图片

go~

前言：后端传了1-6的数字用来表示不同的数据类型，然后每个类型都有个接口。我的下拉框需要显示这六个图片类型供选择。然后根据下拉框选择的不同来展示对应的图片类型。

思路：下拉框：根据图片类型，把六个类型都显示出来

1、下拉框
注意：v-model的值为当前被选中的el-option的 value 属性值，所以两个的命名得一样
提示：下拉框和图片的桥梁主要式依靠 el-select 的 v-model和change

<template>
  <el-form>
      <el-form-item label="图片类型：">
        <el-select
          v-model="select.value"  //v-model的值为当前被选中的el-option的 value 属性值。
          placeholder="请选择"
          clearable  //是否可以清空选项
          @change="handleChange"  // 选中值发生变化时触发，回调参数：目前的选中值。这个我用来处理图片显示的问题
        >
          <el-option
            v-for="item in select.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </template>
  <script>
     export default {
   
      data(){
   
      	select: {
   
        	// 当前选择器值
        	value: '',
       	 	options: [{
   
          	value: 1,
          	label: 'ai',
          	url