简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
VueJS中元素未应用样式类
P粉465287592
P粉465287592 2024-01-16 21:53:49
0
1
391

所以我想当 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 元素上时，它不起作用！

P粉465287592
P粉465287592

全部回复(1)
P粉662614213
P粉6626142132024-01-17 19:38:21 1 楼

根据您的评论@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 }}



sssccc
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！