vue将select下拉框多选选中的数据隔开

在Vue.js中，如果你想要创建一个多选的select下拉框，并将用户选择的数据以某种形式（比如逗号分隔）展示出来，可以这样做：
首先，在模板中，你可以设置一个v-model绑定到数组，以便于处理多选：
<template>
<select v-model="selectedValues" multiple>
<option v-for="(item, index) in options" :key="index" :value="item.value">
{{ item.label }}
</option>
</select>
</template>
登录后复制
然后，在你的组件data部分，初始化一个空数组来保存选中的值：
export default {
data() {
return {
selectedValues: [], // 存储多选选项
options: [
{ value: '1', label: '选项一' },
{ value: '2', label: '选项二' },
{ value: '3', label: '选项三' },
// 更多选项...
]
};
}
}
登录后复制
当你需要显示已选值的时候，可以在某个方法中处理这个数组，例如：
methods: {
getSelectedText() {
let selectedText = this.selectedValues.join(', ');
// 如果不需要空格，可以用其他字符替换逗号
return selectedText.trim(); // 为了去除首尾的空格
}
}
登录后复制
在需要的地方调用getSelectedText()，就可以得到选中的值用逗号隔开了。