VueJS中元素未套用樣式類
所以我想當 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 元素上時，它不起作用！
