vue中select绑定多个值及回显

在Vue中，我们可以使用`v-model`指令来绑定select的选中值。如果要绑定多个值，可以使用一个数组来存储这些值。例如：

<template>
  <div>
    <select v-model="selectedValues" multiple>
      <option value="value1">Option 1</option>
      <option value="value2">Option 2</option>
      <option value="value3">Option 3</option>
    </select>
    <button @click="submit">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: []
    }
  },
  methods: {
    submit() {
      console.log(this.selectedValues); // 打印选中的值
    }
  }
}
</script>

在上面的代码中，我们使用`multiple`属性来开启多选模式，并使用一个空数组`selectedValues`来存储选中的值。当用户选中或取消选中一个选项时，`selectedValues`数组会自动更新。在`submit`方法中，我们可以打印选中的值。

如果要回显已选中的值，只需要在`selectedValues`数组中初始化这些值即可。例如：

<template>
  <div>
    <select v-model="selectedValues" multiple>
      <option value="value1">Option 1</option>
      <option value="value2">Option 2</option>
      <option value="value3">Option 3</option>
    </select>
    <button @click="submit">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: ['value1', 'value3']
    }
  },
  methods: {
    submit() {
      console.log(this.selectedValues); // 打印选中的值
    }
  }
}
</script>

在上面的代码中，我们将`selectedValues`数组初始化为`['value1', 'value3']`，这样在页面加载时就会回显这些选项。