vue3 使用ref将多选select中选中的值清除

在Vue3中，你可以使用`ref`配合`v-model`来处理多选select的选择状态，并通过JavaScript来清除选中的值。首先，你需要创建一个数组`ref`来存储选中的选项：

<template>
  <div>
    <select v-model="selectedOptions" multiple ref="multiSelect">
      <!-- 你的选项列表 -->
      <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
    </select>
    <button @click="clearSelection">清除选择</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        // 更多选项...
      ],
      selectedOptions: [], // 初始化为空数组
    };
  },
  methods: {
    clearSelection() {
      this.$refs.multiSelect.value = []; // 通过ref直接修改数组
    }
  }
};
</script>

在这个例子中，当你点击“清除选择”按钮时，`clearSelection`方法会被调用，它会将`selectedOptions`数组置空，从而清除select中的所有已选项。