VUE JS - 如何默认隐藏 div？如果用户点击按钮，那么它应该使用 vue 显示

Question

下面是我的完整代码在这里我试图默认隐藏“v-show”。默认情况下它应该处于隐藏状态，当用户单击按钮时它应该显示。我使用“display:none”css 属性来隐藏 div 默认值，但它不起作用。我们如何解决这个问题？

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <button @click='toggle = !toggle'> click here </button>
  <div id="hide" v-show='toggle'>showing</div>
</div>

<script>
new Vue({
 el: '#app',
 data () {
   return {
     toggle: true
   }
 },
})
</script>

css

#hide {
    display:none;
}

Answer 1

您已经在组件定义中定义了 toggle: true，并且您正在模板中使用 v-show='toggle'。但是您的 css 样式总是将 display:none; 添加到 #hide 元素。

v-show有什么作用？

当 v-show 中的条件计算为 false 时，它将向元素添加 display: none 内联样式，如果计算为 true，它将删除display: none。更简单地说，它只是在您的元素样式中添加和删除 display: none 。它没有添加任何 display: block 或其他东西来使您的元素可见。

您的元素始终隐藏在您为 #hide 元素添加的 CSS 代码中。因此，即使 v-show 的计算结果为真，它也只会删除添加的 display: none 内联样式。由于为 #hide 添加的样式，您的 css 代码将始终保持 display: none。这意味着您的组件将始终被隐藏。

修复

删除 css 样式。只依赖v-show='toggle'

工作Fiddle.

new Vue({
  el: '#app',
  data() {
    return {
      toggle: false
    }
  },
})

/* #hide {
  display:none;
} */

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <button @click='toggle = !toggle'> click here </button>
  <div id="hide" v-show='toggle'>showing</div>
</div>

VUE JS - 如何默认隐藏 div？如果用户点击按钮，那么它应该使用 vue 显示

VUE JS - How to hide a div by default? And if user clicks on button then it should display using vue

css

vue.js

display

vue-component

vuejs2