Vue.js学习笔记（三）--------条件语句

最新推荐文章于 2024-11-23 16:25:09 发布

原创最新推荐文章于 2024-11-23 16:25:09 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #条件语句

前端同时被 2 个专栏收录

71 篇文章

订阅专栏

Vue.js

16 篇文章

订阅专栏

本文详细介绍了Vue.js中条件渲染的基本用法，包括v-if、v-else和v-else-if指令的具体应用。通过实例展示了如何根据不同的条件显示或隐藏DOM元素。

条件语句

1.v-if

当v-if的值为true时，执行或者显示下一块的内容。

例如：通过toggle函数切换show的值。通过v-if 语句，当show 是true的时候，显示当前元素。

代码：

<style>
		/*按钮样式*/
		.btn{
			width: 160px;
		    height: 40px;
		    line-height: 34px;
		    border-radius: 2px;
			font-size: 14px;
    		font-family: PingFangSC-Regular;
		    color: rgba(255,255,255,1);
		    background: rgba(76,132,255,1);
		    border-radius: 2px;
		    border: 1px solid rgba(76,132,255,1);
		    padding: 0px;	
		}
	</style>
	<div id="div1">
		<button @click="toggle" class="btn" >点击按钮显示/隐藏</button>
		<div v-if="show">你看见这句话了。。</div>
	</div>	
	<script>
		new Vue({
			el:"#div1",
			data:{
				show:true
			},
			methods:{
				toggle:function(){
					this.show=!this.show;
				}
			}
		})
	</script>

效果图：

2.v-else

当v-if的值为false时，执行或者显示v-else中的内容。

在上面的代码加上v-else即可。

代码：

<div id="div1">
		<button @click="toggle" class="btn" >点击按钮显示/隐藏</button>
		<div v-if="show">你看见这句话了。。</div>
		<div v-else>我是不是瞎了，看不见啊。。</div>
</div>

3.v-else-if

v-else-if 用法：

代码：

	<style>
		/*按钮样式*/
		.btn{
			width: 160px;
		    height: 40px;
		    line-height: 34px;
		    border-radius: 2px;
			font-size: 14px;
    		font-family: PingFangSC-Regular;
		    color: rgba(255,255,255,1);
		    background: rgba(76,132,255,1);
		    border-radius: 2px;
		    border: 1px solid rgba(76,132,255,1);
		    padding: 0px;	
		}
	</style>	
	
	<div id="div1">
		<button @click="toggle" class="btn" >我是谁</button>
		<div v-if="number>0.8">再点还是程序猿</div>
		<div v-else-if="number>0.6">快乐程序猿</div>
		<div v-else-if="number>0.4">修仙程序猿</div>
		<div v-else-if="number>0.2">熬夜程序猿</div>
		<div v-else>加班程序猿</div>
	</div>
	<script>
		new Vue({
			el:"#div1",
			data:{
				number:0
			},
			methods:{
				toggle:function(){
					this.number=Math.random();  //math.random()返回0~1之间的伪随机数
				}
			}
		})
	</script>

效果图：