在前端開發中，我們常見到需要根據不同狀態來顯示相應的內容的場景。比如在登錄頁面，我們可能會根據用戶是否已經登錄來顯示不同的按鈕和文本框。在Vue中，我們可以通過使用computed屬性和watch屬性來實現這種需求。

computed屬性是一種經過計算得出的屬性，在Vue組件中可以像普通屬性一樣使用。computed屬性可以根據響應式依賴自動更新，這意味著當響應式依賴發生變化時，computed屬性會自動重新計算。在這種需求場景中，我們可以定義一個computed屬性來根據不同的狀態返回不同的值。

//定義computed屬性
computed: {
buttonLabel: function () {
if (this.isLoggedIn) {
return '退出登錄';
} else {
return '登錄';
}
}
}

在上面的代碼中，我們定義了一個名為buttonLabel的computed屬性。根據this.isLoggedIn的值，如果用戶已經登錄，返回字符串'退出登錄'，否則返回字符串'登錄'。當this.isLoggedIn的值發生變化時，buttonLabel會自動重新計算。

watch屬性是用來監聽Vue實例上的屬性變化并做出響應的一種方法。我們可以在一個Vue組件中定義一個watch屬性來監聽某個屬性的變化，然后在回調函數中根據這個屬性的值來更新其它屬性。在狀態變化時，watch屬性提供了一種手動更新相關屬性的方法，而不需要依賴computed屬性的自動計算。

//定義watch屬性
watch: {
isLoggedIn: function (newValue, oldValue) {
if (newValue === true) {
this.user = {name: '張三', age: 30};
} else {
this.user = null;
}
}
}

在上面的代碼中，我們定義了一個名為isLoggedIn的屬性的watch。當這個屬性的值發生變化時，回調函數會被執行。在這個回調函數中，我們根據新值和舊值來判斷用戶是否已經登錄。如果是，則更新另一個屬性this.user為{name: '張三', age: 30}，否則置為null。

總之，Vue提供了非常方便的方法來實現根據不同狀態顯示不同內容的需求。我們可以使用computed屬性在狀態變化時自動計算返回值，也可以使用watch屬性手動更新和處理相關屬性的值。這些方法為我們的前端開發帶來了巨大的便利，幫助我們更加高效地實現功能需求。