时间戳

首页 > 解决方案 > Vue.js 阻止 classList.remove 工作？

css - Vue.js 阻止 classList.remove 工作？

问题描述

我正在使用 Vue.js，我想在调用 Vue 构造函数之前隐藏元素，否则会向用户显示一堆花括号。我有以下内容：

HTML：

<div class="main hide-me" id="my-vue-element">
    <!-- stuff -->
</div>

CSS：

.hide-me {
    display: none !important;
}

JavaScript：

var myVueElement = document.getElementById("my-vue-element");

if (myVueElement) {
    var myApp = new Vue({
        el: myVueElement
      , data: {
            /* stuff */
        }
      , methods: {
            /* stuff */
        }
    });

    console.log(myVueElement);
    console.log(myVueElement.classList);
    myVueElement.classList.remove("hide-me");
    console.log(myVueElement.classList);
    console.log(myVueElement.getAttribute("class"));

控制台输出为：

DOMTokenList [ "main", "hide-me" ]
DOMTokenList [ "main" ]
main

但是，该元素没有出现，并且在 Firefox 和 Chrome 中使用 DOM 检查器显示hide-me该类仍然存在。我试图用一个简化的例子来重现这一点，但我无法这样做。我在同一个项目中确实有 jQuery，我发现使用$("#my-vue-element").removeClass("hide-me");（甚至在上面的代码之后添加它）会导致类从 DOM 中删除。有任何想法吗？谢谢！

标签： cssdomvue.js

解决方案

在 Vue 中应该避免直接的 DOM 操作。相反，你应该让 Vue 来做（它很擅长）。所以使用

<your-element
  :class="['always-present', {'optional':expression}]"
/>

optional将根据 data-bound 添​​加/删除哪里expression。

此外，如果您只想显示/隐藏元素，则v-if可以使用v-show或v-hide（即：）。v-if="expression"

有关在 Vue 中直接 DOM 操作有意义的案例列表以及每个案例的缺点或潜在缺陷，请阅读处理边缘案例。

推荐阅读