个性化阅读
专注于IT技术分析

vue.js怎样使用v-if v-else

在vue.js中,如何根据条件来判断是否要显示和隐藏模版或者组件?

vue.js有对象的该属性v-if…v-else,该属性就好像我们学习JS的时候if…else…判断语句是一样的,不同的是v-if…v-else…是写在模版或者组件中动态判断改变显示的元素。

例如:

<div id="example-if">
<div class="div-A" v-if='Math.random()>0.5'>
显示代码块A
</div>

<div class="div-B" v-else>
显示代码块B
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#example-if',
data: {
}
});
</script>

不断刷新,你会发现随着随机数的变化,两个代码块也交替显示隐藏。

vue-if

多个条件判断也是如此:

<div id="example-if">
<div class="div-A" v-if='message==="A"'>
显示代码块A
</div>

<div class="div-B" v-else-if='message==="B"'>
显示代码块B
</div>
<div class="div-C" v-else>
显示代码块C
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#example-if',
data: {
message:'C'
}
});
</script>
vue-if-else

这里要注意,这个显示和隐藏不是css属性的display:none控制的,v-if…v-else…是满足判断条件就渲染,反则就不会继续渲染。这里要和v-show区分开来,v-show是css控制的,只是隐藏了,其实是背后渲染了的。

赞(0) 打赏
未经允许不得转载:srcmini » vue.js怎样使用v-if v-else
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏