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,
      },
    ],
  };
},