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

Posted 2023-02-16

【中文标题】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

【发布时间】：2021-09-27 19:18:47

【问题描述】：

下面是我的完整代码这里我试图默认隐藏“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;

【参考方案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 的计算结果为 true，它也只会删除添加的 display: none 内联样式。由于为#hide 添加的样式，您的css 代码将始终保留display: none。这意味着您的组件将始终被隐藏。

修复

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

工作小提琴。

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>