Vue.js如何实现div默认隐藏，点击按钮后才显示？

问题原因 #

• v-show 本质是通过动态修改元素的display属性实现显隐控制，Vue设置的内联样式优先级高于你自定义的ID选择器样式，你写的#hide {display:none}会被v-show的样式直接覆盖，无法生效。
• 你当前代码中toggle的初始值为true，v-show绑定值为真时会强制将元素设为显示状态，自然不会默认隐藏。

解决方案 #

不需要额外写CSS控制默认隐藏，直接修改JS代码中toggle的初始值为false即可，修改后的代码如下：

new Vue({
 el: '#app',
 data () {
   return {
     toggle: false // 初始值设为false，对应元素默认隐藏
   }
 },
})

同时可以删除你之前写的冗余CSS代码#hide {display:none;}，避免后续出现不必要的样式冲突。

内容的提问来源于stack exchange，提问作者Inayat Kazi