VUE条件语句

举报
tea_year 发表于 2021/12/29 23:13:40 2021/12/29
【摘要】 随机生成一个数字,判断是否大于0.55,然后输出对应信息: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>v-else</title> <script src="js/vue.mi...

随机生成一个数字,判断是否大于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 指令来根据条件展示元素。

 

文章来源: aaaedu.blog.csdn.net,作者:tea_year,版权归原作者所有,如需转载,请联系作者。

原文链接:aaaedu.blog.csdn.net/article/details/85691707

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。