vue select :labelinvalue=\true"

在使用Vue中的select元素时，我们可以通过设置labelInValue属性为true来改变选项的默认显示方式。

当我们设置labelInValue为true时，每个选项的value值将是一个对象，对象中包含了label和value两个属性。这样做的好处是，我们可以将选项的显示文本和实际数值进行分离，并且在使用时更加灵活。

以一个简单的例子来说明，假设我们有一个下拉选择框，选项如下：

[
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' },
]

在默认情况下，我们只能通过监听select的change事件来获取选择的值，例如：

onSelectChange(value) {
  console.log(value); // 输出所选的值
}

但是如果我们将labelInValue设置为true，如下所示：

<select v-model="selectedValue" :labelInValue="true" @change="onSelectChange">
  <option v-for="option in options" :value="option.value">{{ option.label }}</option>
</select>

data() {
  return {
    selectedValue: null,
    options: [
      { label: '北京', value: 'beijing' },
      { label: '上海', value: 'shanghai' },
      { label: '广州', value: 'guangzhou' },
    ],
  };
},
methods: {
  onSelectChange(option) {
    console.log(option); // 输出所选的选项对象，包含label和value
  },
},

此时，在onSelectChange方法中，我们可以直接获取到所选的选项对象，包含了label和value。这样，我们就可以更加方便地处理选项的值，而无需额外进行处理。