vue2+ele-ui实践

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

环境：vue2 & element-ui

正片：

Select 选择器 简称 下拉框

下拉框完整的使用循环

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

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

<template>
<!-- 下拉框部分 -->
  <el-select v-model="value" 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: '北京烤鸭'
        }],
        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 用于选择后的展示数据