家具网站建设便宜营销网站建设方案

前言：真理先于实践，实践发现真理，再实践检验真理

环境：vue2 & element-ui

正片：

Select 选择器 简称 下拉框

下拉框完整的使用循环

下拉框 → 点击下拉框 → 展示数据 → 选择数据 → 下拉框显示数据

核心具有两点下拉框 与 数据

<template>
<!-- 下拉框部分 --><el-select v-model="value" placeholder="请选择">
<!-- 下拉框数据 --><el-optionv-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: '北京烤鸭'}],value: ''}}}
</script>

数据， 数据处理 ，数据展示，这三环节会是我们本片内容的核心

数据来源为data中的options

数据处理为

      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"

v-for，简单的增强for循环，将数组中的每一个数据传入item

下面三个属性呢？

:key

:label

:value

第一次遍历数组

        {
          value: '选项1',
          label: '黄金糕'
        }

我们会拿到这么一个对象

value：指顺序

label：对应顺序显示的数据

key?它不是数组中的内容

我们先修改黄金糕的顺序

根据理论，它会出现在最下条的数据

根据循环遍历，它永远会作为第一条数据出现，除非我们写一套逻辑，所以value是一个不显示的值

结论：:key不做显示功能

label才是显示数据的核心

:value这个是用于选中后的下拉框显示，双向绑定

小结：

:key 目前功能不知，无它label不显示

:label 数据渲染的核心

:value 用于选择后的展示数据