模板代码
<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
