所以我想當 testvalue 為 true 時將類別 .testcolor 應用於 div，而當 testvalue 為 false 時不應用任何內容。
當我將 getClass 方法加入 :class 時，它甚至不會被調用，但在從 {{ getClass }} 調用時會被調用。 我嘗試清除緩存，甚至重寫整個程式碼，但仍然不起作用！ 完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title>Vue Test</title>
<style>
.testcolor {
color: red !important;
}
</style>
</head>
<body>
<div id="test" :class="getClass">
<h1>Test stuff</h1>
<h2>{{ testvalue }}</h2>
</div>
<script type="module">
import { createApp } from "https://unpkg.com/vue@3.2.19/dist/vue.esm-browser.js";
createApp({
data() {
return {
testvalue: true,
};
},
methods: {
getClass() {
console.log("Method 'getClass' called");
return this.testvalue ? "testcolor" : "";
},
},
}).mount("#test");
</script>
</body>
</html>
我發現，如果我將 Vue 實例安裝在 div 元素上並將 :class="testClass" （來自答案）新增到 h2 中，它就可以工作了！ 但是當我將它安裝在 h2 元素上時，它不起作用！
根據您的評論@martin0300進行編輯
首先，您需要將該分割區包裝在另一個 id 必須為 test 的分割區中。 Vue 不將容器元素（id 為
test的 div）視為應用程式的一部分，並且不處理任何指令。下面留下了提到這一點的參考文獻。https://vuejs.org/guide/essentials/application .html#安裝應用程式
因此，請將您的標記變更為類似這樣的內容，以套用 getClass 方法中的值...
...或透過這種方式使用計算屬性方法（如下所述。）
--
原始訊息：
getClass當定義為方法時需要被調用，並且返回值（"testcolor"）被設定為 :class 的值。請注意函數呼叫getClass()取代您使用的getClass。也就是說，這不是有條件應用類別的首選方式。與方法相比，我們更喜歡計算屬性。每次渲染時都會呼叫一個方法，而計算屬性僅當它所依賴的底層反應性資料發生變化時才會重新計算（在這種情況下，計算屬性
testClass取決於反應性屬性testvalue代码>.您的情況下慣用的 Vue 程式碼如下。請注意，計算屬性不像函數那樣被調用，因為它們是使用訪問器方法/使用JS 代理在內部實現的（
:class="testClass"和NOT:class ="testClass()")。我相信方法和計算屬性的使用方式之間的差異是導致您困惑的原因。