条件渲染v-if、v-show

v-if

1.用于条件性地渲染一块内容的指令，必须依附于某个元素；

2.只有条件为true时，才会渲染生成DOM。

格式

<h1 v-if="xxx"></h1>  // xxx是能够转换为布尔值
<h1 v-else-if="xxx"></h1>
<h1 v-else-if="xxx"></h1>  // v-else-if可以连续多次使用，必须跟在v-if或v-else-if后使用
<h1 v-else></h1>  // v-else必须跟在v-if或v-else-if后使用，否则v-else不会被识别

// 同时控制多个元素隐藏与显示，可以用<template>标签包裹，并在该标签上使用v-if
// <template>标签是是一个不可见的包装元素，最后的渲染结果不会包含该标签，不会破坏结构
<template v-if="xxx">
  <div>show1</div>
  <div>show2</div>
  <div>show3</div>
</template>

v-show

1.也是用于条件性地渲染一块内容的指令，必须依附于某个元素；

2.不管条件为true或false，都会渲染生成DOM

3.不能与v-else-if、v-else一起使用

4.不可以在<template>标签上使用

格式

<h1 v-show="xxx"></h1>  // xxx是能够转换为布尔值

v-if vs v-show

1.v-if为false时，不会渲染DOM，而v-show会保留DOM，但不显示，v-show底层是由css的display属性实现

注意：使用element ui表单验证时，若某些验证项需要根据条件进行展示，需要用v-if控制，否则页面不显示，DOM依旧存在

2.v-if可以在<template>标签上使用，而v-show不行

3.v-if用于偶尔切换显示，而v-show用于频繁切换显示

学习自用，欢迎大家批评指正~