在Web應用程序中，切換元素顏色是一種常見的交互效果。Vue.js作為一種前端JavaScript框架，它提供了一個快速而簡單的方式來實現此效果。在Vue.js中，我們可以使用v-on指令，將點擊事件綁定到元素上，并使用計算屬性來切換顏色。

首先，在HTML中我們需要一個button元素和一個包含文本內容的div元素。我們可以使用v-bind指令將div元素的背景顏色綁定到計算屬性，計算屬性的返回值是一個包含CSS樣式的JavaScript對象。在點擊button元素時，我們可以使用v-on指令觸發一個叫做toggleColor的方法，該方法將切換計算屬性的返回值。

<div v-bind:style="{'background-color': color}">
{{ message }}
</div>
<button v-on:click="toggleColor">切換顏色</button>
new Vue({
el: '#app',
data: {
color: 'white',
message: '點擊按鈕切換背景顏色'
},
methods: {
toggleColor: function () {
this.color = this.color === 'white' ? 'lightblue' : 'white'
}
},
computed: {
bgColor: function () {
return { 'background-color': this.color }
}
}
})

上面的代碼中，我們創建了一個Vue實例，并設置了data、methods和computed屬性。其中，data屬性包含color和message兩個數據，分別代表背景顏色和提示信息。methods屬性包含toggleColor方法，該方法將根據當前顏色值切換color的值。 computed屬性包含bgColor計算屬性，該計算屬性返回一個JavaScript對象，對象的屬性是CSS樣式。

通過上面的代碼，我們成功地實現了點擊按鈕切換背景顏色的功能。點擊按鈕時，背景顏色將從白色切換為淡藍色，再從淡藍色切換回白色。通過這種方式，我們可以為Web應用程序添加更多交互效果。