Vue中的v-if与v-show有什么区别 分别在什么时候使用

v-if 和 v-show 用于控制元素显示或隐藏。

当 v-if 的条件为 false 时，元素会从页面中删除。当条件为 true 时，元素正常显示。

当 v-show 的条件为 false 时，会添加一个行内样式 display:none 将元素隐藏。当条件为 true 时，元素正常显示。

注意：使用 v-if 时，元素可能无法获取到。而使用 v-show 时，元素一定可以获取到。

 条件渲染 v-show

当 v-show 的条件为 true 时，元素正常显示。

<div id="APP">
	<p v-show="true">条件渲染</p>
</div>

当 v-show 的条件为 false 时，会添加一个行内样式 display:none 将该元素隐藏。

<div id="APP">
	<p v-show="false">条件渲染</p>
</div>

当 v-show 的值为表达式时，会先将计算结果转换为 true 或 false，再进行显示或隐藏

<div id="APP">
	<p v-show="1 == 5">条件渲染</p>
</div>

 

可以在 data 中创建变量，通过动态改变 v-show 的值，使该元素显示或隐藏。

<div id="APP">
	<button @click="toggleShow">切换显示状态</button>
	<p v-show="status">条件渲染</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			status:true
		}
	},
	methods:{
		toggleShow(){
			this.status = !this.status;
		}
	}
});

 注：v-show 适用于切换频率较高的场景，因为 v-show 只是给元素添加样式实现显示隐藏的，并未删除这个元素。

条件渲染 v-if：

当 v-if 的条件为 true 时，元素正常显示。

<div id="APP">
	<p v-if="true">条件渲染</p>
</div>

 
当 v-if 的条件为 false 时，会将该元素在 DOM 中删除。

<div id="APP">
	<p v-if="false">条件渲染</p>
</div>

 
当 v-if 的值为表达式时，也会先将计算结果转换为 true 或 false，再判断是否删除该元素。

<div id="APP">
	<p v-if="1 === 2">条件渲染</p>
</div>

也可以在 data 中创建变量，通过动态改变 v-if 的值，使该元素创建或删除。

<div id="APP">
	<button @click="toggleIf">切换显示状态</button>
	<p v-if="status">条件渲染</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			status:true
		}
	},
	methods:{
		toggleIf(){
			this.status = !this.status;
		}
	}
});

 注：v-if 适用于切换频率较低的场景，因为 v-if 是通过删除元素或重新创建元素实现显示隐藏的，v-if 相比 v-show 的开销更大。

 条件渲染 v-else 和 v-else-if：

<div id="APP">
	<h2>当前num的值是：{{num}}</h2>
	<button @click="add">点击num+1</button>
	<p v-if="num == 1">张三</p>
	<p v-else-if="num == 2">李四</p>
	<p v-else-if="num == 3">王五</p>
	<p v-else>你谁呀？</p>
</div>

注：v-else 和 v-else-if 必须紧跟在 v-if 的后边，标签必须紧挨着不能被打断，如果被打断后边的 v-else 或 v-else-if 将不会生效。

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			num:0
		}
	},
	methods:{
		add(){
			this.num++;
		}
	}
});

注：使用 v-else-if 的优点就是，当 v-if 或 v-else-if 条件成立时，后边的 v-else-if 和 v-else 将不再执行，提高页面渲染效率。

注：使用 v-else 的优点就是，当 v-if 和 v-else-if 的条件都不成立时，就会执行 v-else 渲染一个默认值。另外 v-else 不需要写执行条件。

在 template 模板上使用 v-if：

如果想同时切换多个元素的显示状态，可以使用 template 标签将这些元素包裹在一起，然后在 template 标签上使用 v-if 切换显示状态。

<div id="APP">
	<button @click="toggleIf">切换显示状态</button>
	<template v-if="status">
		<p>北京</p>
		<p>上海</p>
		<p>深圳</p>
	</template>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			status:true
		}
	},
	methods:{
		toggleIf(){
			this.status = !this.status;
		}
	}
});

注：template 标签不会在页面中显示，更不会破坏页面结构。但是 template 标签只能配合 v-if 使用，不能使用 v-show .

原创作者：吴小糖

创作时间：2023.3.2