根据您的评论编辑@martin0300

首先，你需要将division Package 在另一个division中，它的id必须是test。Vue不认为容器元素（id为test的div）是应用程序的一部分，也不处理任何指令。在下面留下了一个提到这一点的引用。
https://vuejs.org/guide/essentials/application.html#mounting-the-app
因此，请将您的标记更改为这样的内容，以应用getClass方法中的值...

<div id="test">
    <div :class="getClass()">
        <h1>Test stuff</h1>
        <h2>{{ testvalue }}</h2>
    </div>
</div>

...或使用计算属性方法的这种方式（下面解释）。

<div id="test">
    <div :class="testClass">
        <h1>Test stuff</h1>
        <h2>{{ testvalue }}</h2>
    </div>
</div>

--
原始消息：
getClass当被定义为一个方法时需要被调用，并且返回值（"testcolor"）被设置为：class的值。注意函数调用getClass()代替了你使用的getClass。

<div id="test" :class="getClass()">
    <h1>Test stuff</h1>
    <h2>{{ testvalue }}</h2>
</div>

也就是说，这不是有条件地应用类的首选方式。我们更喜欢计算属性而不是方法。方法在每次渲染时都会被调用，而计算属性只有在它所依赖的底层React数据发生变化时才会重新计算（在这种情况下，计算属性testClass依赖于React属性testvalue）。
在你的例子中，惯用的Vue代码如下。注意，计算属性不像函数那样被调用，因为它们是使用访问器方法/使用JS代理（:class="testClass"和NOT:class="testClass()"）在内部实现的。我相信方法和计算属性使用方式之间的差异是造成你混淆的原因。

<div id="test" :class="testClass">
    <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,
            };
        },
        computed: {
            testClass() {
                console.log("Recomputed testClass");
                return this.testvalue ? "testcolor" : "";
            },
        },
    }).mount("#test");
</script>