display:none和visibility:hidden属性的区别以及vue中v-if/v-show的区别

1. display:none和visibility:hidden属性的区别

1.1visibility:hidden上代码

<div class="c-000-85 font-14" style="visibility:hidden">关键字：</div>
<div title="可用空格分割关键字 ">
     <el-input
        v-model.trim="value"
        placeholder="请输入关键字"         
      ></el-input>           
</div>

图示

可见visibility:hidden虽然隐藏了dom 却"占着茅坑不拉屎"

1.2 display:none上代码

<div class="c-000-85 font-14" style="display: none">关键字：</div>
<div title="可用空格分割关键字 ">
     <el-input
        v-model.trim="value"
        placeholder="请输入关键字"         
      ></el-input>           
</div>

图示: 

可见:display: none隐藏了dom元素,自己的位置也腾出来了

2. vue中v-if/v-show的区别

2.1

v-show上代码

<div class="c-000-85 font-14" v-show="0">关键字：</div>
<div title="可用空格分割关键字 ">
     <el-input
        v-model.trim="value"
        placeholder="请输入关键字"         
      ></el-input>           
</div>

图示: 

可见:v-show="0实际上就是display: none隐藏了dom元素,自己的位置也腾出来了

2.2 v-if

v-show上代码

<div class="c-000-85 font-14" v-if="0">关键字：</div>
<div title="可用空格分割关键字 ">
     <el-input
        v-model.trim="value"
        placeholder="请输入关键字"         
      ></el-input>           
</div>

图示: 

 

可见:v-if="0 dom直接就不显示了,当v-if为0直接就不会渲染