循環(huán)按鈕多選是Vue框架中非常常見的功能之一。它可以使用戶在一組選項(xiàng)中選擇多個(gè)選項(xiàng)，而不是只能選擇一個(gè)。在Vue中，可以使用v-for指令循環(huán)生成按鈕，v-model指令對(duì)選項(xiàng)進(jìn)行綁定，以及computed方法進(jìn)行選擇結(jié)果的計(jì)算。

<template>
<div>
<button 
v-for="(option, index) in options" 
v-bind:key="index" 
v-bind:class="{ selected: isSelected(index) }" 
v-on:click="toggleOption(index)"
>
{{ option }}
</button>
<p>You selected: {{ selected.join(', ') }}</p>
</div>
</template>
<script>
export default {
data: function() {
return {
options: ['Option 1', 'Option 2', 'Option 3'],
selected: []
}
},
methods: {
toggleOption: function(index) {
if (this.selected.includes(index)) {
this.selected.splice(this.selected.indexOf(index), 1);
} else {
this.selected.push(index);
}
},
isSelected: function(index) {
return this.selected.includes(index);
}
},
computed: {
selectedOptions: function() {
return this.selected.map(index =>this.options[index]);
}
}
}
</script>

在上面的代碼中，我們首先定義了一組選項(xiàng)，即options數(shù)組，以及一個(gè)空的selected數(shù)組來(lái)存儲(chǔ)選擇的選項(xiàng)的索引。然后，我們使用v-for指令循環(huán)生成按鈕，并通過v-bind:key指定了每個(gè)選項(xiàng)的唯一標(biāo)識(shí)符。v-bind:class指令通過isSelected方法來(lái)判斷該選項(xiàng)是否被選擇，如果是則添加一個(gè).selected的類名。

當(dāng)用戶點(diǎn)擊一個(gè)選項(xiàng)時(shí)，我們通過toggleOption方法來(lái)切換該選項(xiàng)的選擇狀態(tài)。如果當(dāng)前該選項(xiàng)已經(jīng)被選擇，則從selected數(shù)組中刪除該選項(xiàng)的索引；否則，將該選項(xiàng)的索引添加到selected數(shù)組中。

最后，我們使用computed屬性來(lái)計(jì)算已選擇的選項(xiàng)的值。該屬性返回一個(gè)新數(shù)組，其中包含已選擇選項(xiàng)的文本值，即this.options數(shù)組中相應(yīng)索引的值。然后在模板中使用{{ selected.join(', ') }}來(lái)顯示已選擇選項(xiàng)的文本值，以逗號(hào)分隔。