suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Stilklassen werden in VueJS nicht auf Elemente angewendet

Also möchte ich die Klasse .testcolor auf das Div anwenden, wenn der Testwert wahr ist, und nichts anwenden, wenn der Testwert falsch ist.

Wenn ich die getClass-Methode zu :class hinzufüge, wird sie nicht einmal aufgerufen, wohl aber, wenn sie von {{ getClass }} aufgerufen wird. Ich habe versucht, den Cache zu leeren und sogar den gesamten Code neu zu schreiben, aber es funktioniert immer noch nicht! Der vollständige Code lautet wie folgt: 

<!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>

Ich habe festgestellt, dass es funktioniert, wenn ich die Vue-Instanz auf dem div-Element mounte und :class="testClass" (aus der Antwort) zum h2 hinzufüge! Aber wenn ich es auf h2 element installiere, funktioniert es nicht!

P粉465287592P粉465287592355 Tage vor488

Antworte allen(1)Ich werde antworten

  • P粉662614213

    P粉6626142132024-01-17 19:38:21

    根据您的评论@martin0300进行编辑

    首先，您需要将该分区包装在另一个 id 必须为 test 的分区中。 Vue 不将容器元素（id 为 test 的 div）视为应用程序的一部分，并且不处理任何指令。下面留下了提到这一点的参考文献。

    https://vuejs.org/guide/essentials/application .html#安装应用程序

    因此，请将您的标记更改为类似这样的内容，以应用 getClass 方法中的值...

    
    
    
        
    Test stuff
    
        
    {{ testvalue }}

    ...或者通过这种方式使用计算属性方法（如下所述。）

    
    
    
        
    Test stuff
    
        
    {{ testvalue }}

    --

    原始消息：

    getClass 当定义为方法时需要被调用，并且返回值（"testcolor"）被设置为 :class 的值。请注意函数调用 getClass() 代替您使用的 getClass。

    
    
    Test stuff
    
    
    {{ testvalue }}

    也就是说，这不是有条件应用类的首选方式。与方法相比，我们更喜欢计算属性。每次渲染时都会调用一个方法，而计算属性仅当它所依赖的底层反应性数据发生变化时才会重新计算（在这种情况下，计算属性 testClass 取决于反应性属性 testvalue.

    您的情况下惯用的 Vue 代码如下。请注意，计算属性不像函数那样被调用，因为它们是使用访问器方法/使用 JS 代理在内部实现的（:class="testClass" 和 NOT :class ="testClass()")。我相信方法和计算属性的使用方式之间的差异是导致您困惑的原因。

    
    
    Test stuff
    
    
    {{ testvalue }}

    Antwort
    0
  • StornierenAntwort