Vue option 选择框中的label value key的意义

author: fengclchn@outlook.com

date: 09/07/2021

• 以element-ui为例

<el-form-item label="选择框">
  <el-select
    v-model="formData.select"
    clearable
    filterable
    placeholder="请选择"
  >
    <el-option
      v-for="item in selectOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <span class="optionLabel">{{ item.label }}</span>
      <span class="optionValue">{{ item.value }}</span>
    </el-option>
  </el-select>
</el-form-item>

data() {
  return {
    formData: {
	  select: "",
    },
    //选择项
    selectOptions: [
      {
        value: "0001",
        label: "选项1",
        disabled: false,
      },
      {
        value: "0002",
        label: "选项2",
        disabled: false,
      },
      {
        value: "0003",
        label: "选项3",
        disabled: false,
      },
    ],
  };
},

属性	意义
label	这是给用户看的，当点击下拉菜单时，会出来选项，用户看到的选项就是这个
value	这是你点击某个label(option)之后，将对应的值给v-model绑定的值model
key	这个呢相当于身份令牌，唯一的，防止出错，虽然没有也行，但是官网推荐还是加上为好。key是为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。