Question

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

隐藏div＆gt;单击另一个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
    }
})

Answer 1

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

稍作修改，您的代码运行正常：

<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>

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

Answer 2

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

示例：v-if，v-else

from tensorflow.python.keras.layers import LSTM

视频节目示例

<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>

Answer 3

我建议使用“ 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;
}

Answer 4

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

如何用Vue.js隐藏div

4 个答案: