vue 条件渲染 （v-if\v-show）

说到条件渲染，大家可能用的较多的是v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

示例：

 <template v-if="!!item.organization">
          <el-table-column :prop="item.dataIndex" :label="item.title">
            <template #default="scope">
              <el-tag type="success">{{ scope.row.organization.name }}</el-tag>
            </template>
          </el-table-column>
  </template>

这里的v-if 用在了template 上。

因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素

也能跟v-else 搭配使用：

<button @click="isShow= !isShow">Toggle</button>

<h1 v-if="isShow">我是真</h1>
<h1 v-else>假的，傻瓜</h1>

一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

也能跟 v-else-if 连续搭配使用

<div v-if="isShow=== 'A'">
  A
</div>
<div v-else-if="isShow=== 'B'">
  B
</div>
<div v-else-if="isShow=== 'C'">
  C
</div>
<div v-else>
  Not D
</div>

和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

接着就是v-show 指令 也是一种条件渲染

<h1 v-show="isShow">Hello!</h1>

虽然用法跟v-if差不多，但是还是有区别的。v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。

还有就是 v-show 不支持在template 元素上使用，也不能和 v-else 搭配使用。

当然 v-if 与 v-show 两者的区别： （这是面试官常问的问题）

v-if是条件渲染，对dom节点的删除和增加，一般适用于较少频次的切换。

v-show是伪条件渲染，对dom节点的样式display的改变，适用于频次较多的切换。

应用场景：

初次加载，v-if要比v-show好，页面不会多加载盒子，这里就说明了v-if 是惰性的，只有当为true 的时候才会被渲染。

频繁切换，v-show要比v-if好，创建删除性能开销大，显示和隐藏开销小。