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 用于选择后的展示数据