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

Posted 2023-02-22

【中文标题】Vue.js 阻止 classList.remove 工作？ [复制]

【英文标题】：Vue.js prevents classList.remove from working? [duplicate]

【发布时间】：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，您介意将您的评论作为答案吗？

【参考方案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>