首页 > 代码库 > [Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)
[Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)
You can use v-if
and v-else
to display content based on assertions on your data. Similarly, v-show
can be used to render the content, but hide it with css. v-if
can also be used on an invisible wrapper <template>
element.
v-if v-else:
It is good that when you use ‘v-if‘ you wrap the html into ‘<template>‘:
<template v-if="counter > 5"> <div>Show if the counter is greater than five</div> </template>
‘v-else‘: will be rendered if the closeset ‘v-if‘ doesn‘t render:
<template v-if="counter > 5"> <div>Show if the counter is greater than five</div> </template> <div v-else>Show the counter is smaller than five</div>
v-show:
<button @click="dec" v-show="counter > 0">-</button> <button @click="inc" v-show="counter < 5">+</button>
[Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。