Vue.js 阻止 classList.remove 工作？ [复制]答案

【问题标题】：Vue.js prevents classList.remove from working? [duplicate]Vue.js 阻止 classList.remove 工作？ [复制]
【发布时间】：2019-06-13 01:10:51
【问题描述】：

我正在使用 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 中删除。有任何想法吗？谢谢！

【问题讨论】：

不要那样做。相反，使用数据绑定有条件地添加类。
老实说，您可能想要这个：v-cloak。 “这个 [v-cloak] 指令可用于隐藏未编译的 mustache 绑定，直到 Vue 实例准备好”
@birdspider，您介意将您的评论作为答案吗？

标签： css dom vue.js

【解决方案1】：

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

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

optional 将根据数据绑定的expression 添加/删除。

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

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

【讨论】：

【解决方案2】：

如果您使用 Vue 视图/组件及其内部模板代码，则在 Vue 准备好之前不会渲染元素。

app.vue 内部的含义在路由器加载视图之前不会显示任何内容

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

【讨论】：