模板代码

<template>
<el-select v-model="value8" filterable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>

<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value8: ''
}
}
}
</script>

MVC三层模式

model层：

展示区域.PNG
1、整个项目选项的模型数据
2、即实例中的value8，
js调用.PNG
由于数据是从后台整个查询出的，需要通过一些方法（此处为getBrandList方法）来获取所需要的值
注：导入接口的方式放入view层内介绍

control层：

三层模型.PNG 控制层接口地址.PNG

-在mapper层内进行数据库的相关操作：
1、创建相关接口

创建调用方法的接口.PNG

2、创建xml文件

xml中实现方法.PNG
xml中的具体方法.PNG

-在serivce层内声明相关接口及实现
1、相关的架构

创建相关组织架构.PNG

2、接口声明

接口的具体声明.PNG

3、接口实现

接口方法的实现.PNG

view层下的相关操作：
1、api为相关接口的声明

前端相关接口.PNG

2、在相对应的接口文件中进行配置

相关配置.PNG

3、导入

导入.PNG

最终展示

展示1.PNG
展示2.PNG