前言：真理先于實(shí)踐，實(shí)踐發(fā)現(xiàn)真理，再實(shí)踐檢驗(yàn)真理

環(huán)境：vue2 &?element-ui

正片：

Select 選擇器 簡(jiǎn)稱 下拉框

下拉框完整的使用循環(huán)

下拉框 → 點(diǎn)擊下拉框 → 展示數(shù)據(jù) → 選擇數(shù)據(jù) → 下拉框顯示數(shù)據(jù)

核心具有兩點(diǎn)下拉框 與 數(shù)據(jù)

<template>
<!-- 下拉框部分 --><el-select v-model="value" placeholder="請(qǐng)選擇">
<!-- 下拉框數(shù)據(jù) --><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 {//數(shù)據(jù)庫來源options: [{value: '選項(xiàng)1',label: '黃金糕'}, {value: '選項(xiàng)2',label: '雙皮奶'}, {value: '選項(xiàng)3',label: '蚵仔煎'}, {value: '選項(xiàng)4',label: '龍須面'}, {value: '選項(xiàng)5',label: '北京烤鴨'}],value: ''}}}
</script>

數(shù)據(jù)， 數(shù)據(jù)處理 ，數(shù)據(jù)展示，這三環(huán)節(jié)會(huì)是我們本片內(nèi)容的核心

數(shù)據(jù)來源為data中的options

數(shù)據(jù)處理為

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

v-for，簡(jiǎn)單的增強(qiáng)for循環(huán)，將數(shù)組中的每一個(gè)數(shù)據(jù)傳入item

下面三個(gè)屬性呢？

:key

:label

:value

第一次遍歷數(shù)組

????????{
? ? ? ? ? value: '選項(xiàng)1',
? ? ? ? ? label: '黃金糕'
? ? ? ? }

我們會(huì)拿到這么一個(gè)對(duì)象

value：指順序

label：對(duì)應(yīng)順序顯示的數(shù)據(jù)

key?它不是數(shù)組中的內(nèi)容

我們先修改黃金糕的順序

根據(jù)理論，它會(huì)出現(xiàn)在最下條的數(shù)據(jù)

根據(jù)循環(huán)遍歷，它永遠(yuǎn)會(huì)作為第一條數(shù)據(jù)出現(xiàn)，除非我們寫一套邏輯，所以value是一個(gè)不顯示的值

結(jié)論：:key不做顯示功能

label才是顯示數(shù)據(jù)的核心

:value這個(gè)是用于選中后的下拉框顯示，雙向綁定

小結(jié)：

:key 目前功能不知，無它label不顯示

:label 數(shù)據(jù)渲染的核心

:value 用于選擇后的展示數(shù)據(jù)