所以我想在 testvalue 为真时将类 .testcolor 应用于 div，而在它为假时不应用任何东西。
当我将 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/[email protected]/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 元素上时它不起作用！
getClass"testcolor"getClass()getClass<div id="test" :class="getClass()">
<h1>Test stuff</h1>
<h2>{{ testvalue }}</h2>
</div>
也就是说，这不是有条件地应用类的首选方法。我们更喜欢计算属性而不是方法。每次渲染都会调用一个方法，而计算属性只有在它依赖的底层反应数据发生变化时才会重新计算（在这种情况下，计算属性
testClasstestvalue您的案例中惯用的 Vue 代码如下。请注意，计算属性不会像函数一样被调用，因为它们是使用访问器方法/使用 JS 代理（
:class="testClass":class="testClass()"<div id="test" :class="testClass">
<h1>Test stuff</h1>
<h2>{{ testvalue }}</h2>
</div>
<script type="module">
import { createApp } from "https://unpkg.com/[email protected]/dist/vue.esm-browser.js";
createApp({
data() {
return {
testvalue: true,
};
},
computed: {
testClass() {
console.log("Recomputed testClass");
return this.testvalue ? "testcolor" : "";
},
},
}).mount("#test");
</script>