Vue之条件语句(if-else-if)

最新推荐文章于 2025-06-07 15:34:20 发布

原创最新推荐文章于 2025-06-07 15:34:20 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

vue学习笔记专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用Vue.js进行条件渲染的实例，通过v-if、v-else-if和v-else指令，实现根据变量a的不同值显示不同的内容。同时，演示了如何通过点击按钮随机生成一个0到100之间的数，以此来改变页面显示的文字。

主要组合有

v-if="a>90"
v-if="a>90" v-else
v-if="a>90" v-else-if="a>60 v-else

<!DOCTYPE html>
<html>
	<head>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="div">
			<button @click="gaoqi">随机按钮</button>
				<div v-if="a>90">土豪</div>
				<div v-else-if="a>60">有点小钱</div>
				<div v-else>穷鬼</div>
		</div>
	</body>
</html>
<script type="text/javascript">
			new Vue({
				el:'#div',
				data:{
					a:0
				},
				methods:{
					gaoqi: function(){
						this.a = Math.random()*100;
						// alert(this.a)
					}
				}
			})
</script>