备案号链接工信部网站,建设银行河北招聘网站,wordpress用户名u开头,网站动画用什么程序做前言#xff1a;真理先于实践#xff0c;实践发现真理#xff0c;再实践检验真理 环境#xff1a;vue2 element-ui
正片#xff1a; Select 选择器 简称 下拉框
下拉框完整的使用循环
下拉框 → 点击下拉框 → 展示数据 → 选择数据 → 下拉框显示数据
核心具有…前言真理先于实践实践发现真理再实践检验真理 环境vue2 element-ui
正片 Select 选择器 简称 下拉框
下拉框完整的使用循环
下拉框 → 点击下拉框 → 展示数据 → 选择数据 → 下拉框显示数据
核心具有两点下拉框 与 数据 template
!-- 下拉框部分 --el-select v-modelvalue placeholder请选择
!-- 下拉框数据 --el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select
/templatescriptexport default {data() {return {//数据库来源options: [{value: 选项1,label: 黄金糕}, {value: 选项2,label: 双皮奶}, {value: 选项3,label: 蚵仔煎}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}],value: }}}
/script 数据 数据处理 数据展示这三环节会是我们本片内容的核心
数据来源为data中的options
数据处理为 v-foritem in options :keyitem.value :labelitem.label :valueitem.value v-for简单的增强for循环将数组中的每一个数据传入item
下面三个属性呢
:key
:label
:value
第一次遍历数组 { value: 选项1, label: 黄金糕 } 我们会拿到这么一个对象 value指顺序 label对应顺序显示的数据 key?它不是数组中的内容 我们先修改黄金糕的顺序 根据理论它会出现在最下条的数据 根据循环遍历它永远会作为第一条数据出现除非我们写一套逻辑所以value是一个不显示的值 结论:key不做显示功能
label才是显示数据的核心
:value这个是用于选中后的下拉框显示双向绑定 小结 :key 目前功能不知无它label不显示 :label 数据渲染的核心 :value 用于选择后的展示数据
