如何使用 Vue.js 隐藏 div答案

【问题标题】：How to hide div with Vue.js如何使用 Vue.js 隐藏 div
【发布时间】：2018-07-12 17:19:32
【问题描述】：

我希望能够使用 Vue 隐藏一个 div，尽可能减少对性能的影响，因为网站上的几个 div 将以这种方式处理。我该怎么做？

隐藏 div > 点击另一个 div 时显示它： (Example (without Vue))

使用 Vue（不工作）

html

<div id="app" v-on:click="seen = !seen" class="control">
    <p>click app</p>
</div>

<div v-if="seen" id="hide">
<p>hide me </p>
</div>

JavaScript

new Vue({
    el:'#hide',
    data:{
        seen: false
    }
})

【问题讨论】：

Vue 无法更改应用根目录之外的内容
@Ferrybig 你说得对......我忘了包括重要的部分......
Vue 无法切换根元素的显示/隐藏状态，因为 vue 需要至少有 1 个根元素
@Ferrybig 好的，我明白了，只能隐藏 div 中的元素，而不能隐藏 div 本身。
不，你没有得到它。

标签： html vue.js

【解决方案1】：

正如@Ferrybig 所说，Vue 只能控制它绑定到的元素和所有这些子元素。您的 hide 元素位于绑定到 Vue (app) 的元素之外，因此 Vue 无法更改它。

稍作改动，您的代码就可以正常工作：

new Vue({
el:'#wrapper',
data:{
    seen: true
}
});

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="wrapper">
  <div id="app" v-on:click="seen = !seen" class="control">
      <p>click app</p>
  </div>
        
  <div v-if="seen" id="hide">
      <p>hide me </p>
  </div>
</div>

【讨论】：

这个解决方案有点危险。因为使用“v-if”，div 元素不会在 DOM 中呈现。可能是v-show更好。

【解决方案2】：

我建议使用“v-show”或“:class”来有效地隐藏组件。根据我自己的经验，在某些奇怪的情况下，v-show 可能会导致 ag-grid 组件进入错误的数据表，但是使用 ":class" 时没有问题。

模板代码可以是：

<div v-show="seen" id="hide">
   <p>hide me </p>
</div>

或者

<div :class="{ hide: !seen }" id="hide">
   <p>hide me </p>
</div>

使用 CSS

.hide {
    visibility: hidden !important;
}

【讨论】：

【解决方案3】：

您可以使用 v-if-else 或 v-show，它们以不同的方式工作。 v-if, v-else 会将你的 HTML 元素附加/分离到它的根元素。另一方面，v-show 将使用 style="display:none;",

示例：v-if、v-else

<body>
    <div id = 'app'>
        <button @click="show = !show">Click</button>
        <p v-if="show"> 
            v-if value of show is: {{show}}
        </p>
        <p v-else> 
            v-else value of show is: {{show}}
        </p>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: function(){
                return{
                    show: true
                }
            }
        });
    </script>
</body>

示例视频展示

<body>
    <div id = 'app'>
        <button @click="show = !show">Click</button>
        <p v-show="show"> 
            v-show works with style="display:none;"
        </p>

    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: function(){
                return{
                    show: true
                }
            }
        });
    </script>
</body>

【讨论】：

【解决方案4】：

一个vue实例有自己的作用域，只有在它的作用域内，它才能控制元素。你需要关注被挂载的元素。一个实例，一个根元素。

【讨论】：