v-if条件判断及v-show

最新推荐文章于 2024-09-12 10:55:03 发布

呦呦鹿鸣~@

最新推荐文章于 2024-09-12 10:55:03 发布

阅读量8.2k

点赞数 13

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_53841687/article/details/126124236

版权

本文详细介绍了Vue.js中的v-if和v-show的使用，包括它们的基本用法、在条件判断中的作用，以及它们的区别。v-if会根据条件动态创建或移除DOM元素，适合条件不常改变的情况，而v-show则是通过切换display样式控制显示，适用于频繁切换场景。此外，文章还讨论了在v-for中使用key的重要性，强调了不推荐使用index作为key的原因和diff算法的影响。

摘要由CSDN通过智能技术生成

一、v-if 的基本使用

v-if用于条件判断，判断Dom元素是否显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2 v-if="isFlag">我们是勇于战斗的</h2>
			
			<h3 v-if="age<18">我们是青少年</h3>
			<h3 v-else-if="age<60">我们是18到60的青壮年</h3>
			<h3 v-else>大于60岁我们是老年人</h3>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						isFlag:false,
						age:70
					}
				}
			})
			
		</script>
	</body>
</html>

输入各不同年龄段效果：

当isFlag 为false时—隐藏DOM元素

二、v-if 的demo

在登录网站是经常可以选择使用账户名或者邮箱登录的切换按钮。要求点击按钮切换登录方式。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<di