vue实现多选查询代码

以下是一个简单的Vue多选查询代码示例：

HTML代码：

<div id="app">
  <select v-model="selected" multiple>
    <option v-for="option in options" :value="option.value">{{ option.text }}</option>
  </select>
  <button @click="search">Search</button>
  <p>{{ selectedValues }}</p>
</div>

Vue代码：

new Vue({
  el: '#app',
  data: {
    selected: [],
    options: [
      { text: 'Option 1', value: 'option1' },
      { text: 'Option 2', value: 'option2' },
      { text: 'Option 3', value: 'option3' },
      { text: 'Option 4', value: 'option4' },
      { text: 'Option 5', value: 'option5' }
    ]
  },
  computed: {
    selectedValues() {
      return this.selected.join(', ');
    }
  },
  methods: {
    search() {
      // Do something with selected values
      console.log(this.selected);
    }
  }
})

在这个示例中，我们使用了Vue的v-model指令来绑定一个数组selected到一个多选select元素上。我们还使用了v-for指令来动态生成选项。当用户选择一个或多个选项时，selected数组将包含选中的值。我们还定义了一个计算属性selectedValues来将选中的值转换为逗号分隔的字符串，并在页面上显示出来。最后，我们定义了一个search方法来处理用户的选择。