vue下拉框取key值输出代码

假设有一个下拉框的选项如下：

<template>
  <div>
    <select v-model="selected">
      <option :value="{key: '1', value: 'option1'}">Option 1</option>
      <option :value="{key: '2', value: 'option2'}">Option 2</option>
      <option :value="{key: '3', value: 'option3'}">Option 3</option>
    </select>
    <button @click="printSelectedKey">Print Selected Key</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: {},
    };
  },
  methods: {
    printSelectedKey() {
      console.log(this.selected.key);
    },
  },
};
</script>

在这个例子中，`selected`是绑定到`select`标签的`v-model`指令的。每个选项的`value`属性是一个包含`key`和`value`字段的对象。当用户选择一个选项时，`selected`的值将变为该选项的`value`属性所代表的对象。

在`printSelectedKey`方法中，我们可以通过`this.selected.key`来获取`selected`对象的`key`属性，从而输出所选选项的`key`值。