条件渲染

v-if

v-if指令用于条件性的渲染一块内容，这块内容只有为真的时候才会被渲染。

<p v-if="br">显示内容</p>

export default {
		data() {
			return {
				br: true,
			}
		},
	}

当true变成false时候将不会显示内容。

v-else

v-if指令执行时当对应值为false时候执行这个。

<p v-if="br">显示内容</p>
		<p v-else>显示内容01</p>

v-else-if

用于多条件判断时

<view>
		<p v-if="br === 'A'">显示A</p>
		<p v-else-if="br === 'B'">显示B</p>
		<p v-else-if="br === 'C'">显示C</p>
		<p v-else-if="br === 'D'">显示d</p>
	</view>

export default {
		data() {
			return {
				br: 'C',
			}
		},
	}

v-show

基本和前面一样，但是这个只能对自身条件进行判断。

v-if和v-show区别

v-if是"真实的"条件渲染，它确保在切换时，条件区块内的事件监听器和子组件都会被销毁和重建。如果初始条件为false，那么在初次渲染时不会做任何事情，只有当条件首次变为true时，条件区块才会被渲染。

相比之下，v-show要简单得多。无论初始条件如何，元素始终会被渲染(不限时时候也渲染为display:none)，只是CSS display属性会被切换。因此，v-show具有更高的初始渲染开销，但在频繁切换的情况下，性能上更好。

总而言之，如果需要频繁切换元素的显示与隐藏，那么使用v-show较为合适。如果在运行时绑定的条件很少发生改变，那么v-if会更合适。