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

author: [email protected]

date: 09/07/2021

• 以element-ui为例

  
    
      {{ item.label }}
      {{ item.value }}
    
  

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 属性。