vue中的条件渲染 v-show、v-if、v-else、v-else-if

一、首先来看下v-show 与 v-if 的区别

1、共同点：当为false时，两者渲染的标签都不显示，当条件不成立时，其所对应的标签元素都不可见
2、不同点：
①.v-if在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销相对来说会比v-show大。
②.v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS切换。
③.v-if可以配合 template使用，页面渲染时，不会展示template，而v-show不支持template

  <template v-if="n === 1">
	<h2>你好</h2>
	<h2>时光</h2>
	<h2>慢点</h2>
  </template>

使用时选哪个比较好呢？
由于，v-if 有更高的切换开销（元素的创建与销毁），而 v-show 有更高的初始渲染开销（display属性控制元素的显示与消失）。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

二、v-else 的使用

注意：v-if 与 v-else 要挨着写才起作用

<template>
 <div>
   <p v-if="isShow">true</p>
   <p v-else>false</p>

 </div>
</template>
<script>
    export default {
        data(){
            return{
                isShow:false,
            }
        }
    }
</script>

输出：false

三、v-else-if 的使用

<template>
 <div>
   <p v-if="type=='A' ">A</p>
   <p v-else-if="type=='B'">B</p>
   <p v-else-if="type=='C'">C</p>
   <p v-else>Not A/B/C</p>
 </div>
</template>
<script>
    export default {
        data(){
            return{
                type:"B",
            }
        }
    }
</script>

代码解读：以上代码输出B
首先判断type是否等于A，如果是，就输出A，如果不是，就继续判断B，以此类推，如果都不是就输出最后一个v-else中的内容