VUE条件语句

最新推荐文章于 2022-05-14 13:51:36 发布

teayear

最新推荐文章于 2022-05-14 13:51:36 发布

阅读量488

点赞数 1

分类专栏：前端技术道本自然文章标签： v-if v-else-if v-else

本文链接：https://blog.csdn.net/zhangchen124/article/details/85691707

版权

道本自然同时被 2 个专栏收录

743 篇文章 39 订阅

订阅专栏

前端技术

260 篇文章 18 订阅

订阅专栏

随机生成一个数字，判断是否大于0.55，然后输出对应信息：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-else</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="Math.random()>0.5">
				大于0.55
			</div>
			<div v-else>
				不大于0.55
			</div>
		</div>
		<script>
			new Vue({
				el:'#app'
			})
		</script>
	</body>
</html>

该案例针对随机产生的数字进行判断，从而显示对应的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-if-else2</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="type==='A'">
				A块
			</div>
			<div v-else-if="type==='B'">
				<h1 v-show="ok">ok.B</h1>
			</div>
			<div v-else-if="type==='C'">
				C块
			</div>
			<div v-else>
				其他块
			</div>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					type:'B',
					ok:true
				}
			})
		</script>
	</body>
</html>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后,注意不要都写成v-if,有三种形式。本处使用 v-show 指令来根据条件展示元素。

teayear

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE条件语句

随机生成一个数字，判断是否大于0.55，然后输出对应信息：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v-else&lt;/title&gt; &lt;script src="js/vue.min.js"&amp
复制链接

扫一扫