v-if判断的例子

最新推荐文章于 2024-05-15 18:27:31 发布

喝星茶发o_o ....

最新推荐文章于 2024-05-15 18:27:31 发布

阅读量139

点赞数

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

本文链接：https://blog.csdn.net/weixin_44479957/article/details/125220866

版权

vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="a<=5">情况1: a小于等于5</div>
			<!-- <span></span> -->
			<div v-else-if="a<=10">情况2: a大于5,小于等于10</div>
			<div v-else>情况3: a大于10</div>
			<!-- 多个dom元素根据条件展示其一，使用v-if -->
			<!-- 注: v-if"家族"中间不允许存在其他元素 -->
			
			<!-- v-if"家族"展示与隐藏元素的方式 是创建与销毁 -->
			<!-- 不符合条件的元素，就从页面上销毁，符合条见的元素创建出来 -->
			<!-- 创建与销毁的方式效率会低一些 -->
			<!-- 但是可以创建多个条件分支 -->
			
			<!--
				如果没有多个条件分支，而是只存在一个元素，
				满足条件就展示，不满足条件就隐藏，那么不要使用v-if
				使用v-show
			-->
			<div v-show="a>10">a大于10</div>
			<!-- <div v-if="a>10">a大于10</div> -->
			<!-- 满足田间div就展示 不满足就隐藏 -->
			<!-- 隐藏的方式是添加css display:none -->
			<!-- 使用css的方式 效率较高 -->
			
			<!-- 一个元素 就用v-show =>效率高 -->
			<!-- 多分枝就用v-if家族  -->
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data(){
					return{
						a:5
					}
				}
			})
		</script>
	</body>
</html>

		<!-- 注: v-if"家族"中间不允许存在其他元素 -->
		
		<!-- v-if"家族"展示与隐藏元素的方式 是创建与销毁 -->
		<!-- 不符合条件的元素，就从页面上销毁，符合条见的元素创建出来 -->
		<!-- 创建与销毁的方式效率会低一些 -->
		<!-- 但是可以创建多个条件分支 -->
		
		<!--
			如果没有多个条件分支，而是只存在一个元素，
			满足条件就展示，不满足条件就隐藏，那么不要使用v-if
			使用v-show
		-->