Vue html标签选择命令 v-if v-show

适用范围:

1. if与show命令的使用区别:

性能开销

1. 一般来说，v-if 有更高的切换开销
   1. 如果在运行时条件很少改变，则使用 v-if 较好
   2. false就不会渲染加载该组件
2. 而 v-show 有更高的初始渲染开销。
   1. 如果需要非常频繁地切换，则使用 v-show 较好
   2. 即使false也会渲染和加载组件(但不会占用布局)

梗概:

Vue为html定制了两种选择语句

1. v-if
   1. 真正的程序流控制
2. v-show
   1. 单纯控制html的隐藏样式

实例:

1. if语句

<template v-if="open===true">
	<div v-if="type === 'A'">
	  A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
</template>

1.1. 说明:

1. v-else 和v-else-if元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
2. child::template标签

2. show语句:

<h1 v-show="条件表达式">Hello!</h1>