當我們使用Vue編寫網頁時，經常會出現需要根據不同的情況讓用戶選中的內容變色的需求。這時候我們可以使用Vue來輕松地實現這個效果。

代碼如下：
HTML代碼：
<div id="app">
<div v-for="color in colors"
:key="color"
:style="{backgroundColor: color, color: selectedColor === color ? 'white' : 'black'}"
@click="selectedColor =color"
>
{{ color }}
</div>
</div>
JavaScript代碼：
new Vue({
el: '#app',
data: {
colors: ['red', 'blue', 'green', 'yellow'],
selectedColor: ''
}
})

首先，我們需要準備一個包含需要選擇的顏色的數組，數組中的每個元素都代表一個顏色。這里我們使用了‘red’，‘blue’，‘green’和‘yellow’四種常見顏色作為范例。

然后，我們在Vue對象的data選項中添加了一個selectedColor屬性用于存儲當前被選中的顏色。

接著，在HTML代碼中，我們使用v-for指令循環遍歷colors數組中的每個顏色，用div元素將其展示出來。v-for指令會將循環遍歷的每個元素作為變量color傳入div元素中，我們可以通過{{color}} 來展示它。

:key="color"是Vue的一個特殊的屬性，它可以用來標識一個特定的元素，從而讓Vue更好地跟蹤它們的變化。在這里，我們將color作為每個div元素的key，確保Vue可以正確地為它們更新DOM；

:style指令用于設置HTML元素的CSS樣式，我們在這里使用它來設置當前div元素的backgroundColor屬性，以顯示對應的顏色。我們還使用selectedColor與color比較，用來判斷當前元素是否應該被選定；

@click指令可以用來監聽div元素的單擊事件，我們使用它在用戶選中一個顏色時將selectedColor屬性設置為對應顏色。這時，頁面上所有其他顏色的div元素的顏色會變成黑色，而被選中的顏色的div元素的背景顏色會變成對應的顏色，文字顏色變為白色。

這樣，我們就可以輕松地實現根據選中情況變色的效果。Vue的便捷性讓我們可以通過上述簡單的幾行代碼實現這個非常實用的功能。