「已注销」 2023-07-08 23:57 采纳率: 14.3%
浏览 28

求解v-show为什么没有讲box盒子默认隐藏起来

求解v-show为什么没有讲box盒子默认隐藏起来，代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                height: 400px;
                width: 500px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button>显示</button>
            <div id="box" v-show="flag">
                <div class="box-show">
                    添加
                </div>
                <div class="box-one">
                    <input type="name" name="name" id="name" placeholder="请输入名字...."/>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script>
            var va = new Vue({
            el: '#app',
            flag: false, //弹框的显示与隐藏
            data: {
                
            }
        </script>
    </body>
</html>
  • 写回答

2条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-07-09 08:40
    关注
    不知道你这个问题是否已经解决, 如果还没有解决的话:
    • 以下回答来自chatgpt:

      在默认情况下将box盒子隐藏起来，可以通过以下方式修改代码：

      <div v-show="isVisible" style="display: none">
  <!-- 内容 -->
</div>

      通过给box添加内联样式style="display: none"，可以在初始时将box隐藏起来。这样，在isVisible为true时，box会根据v-show显示，为false时，box会根据v-show隐藏。

      请注意，使用v-show指令时，Vue会根据v-show的值来切换元素的display属性，只有当v-show为true时，元素才会显示。因此，需要通过内联样式style="display: none"将元素默认隐藏起来。


    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题？

问题事件

  • 创建了问题 7月8日