v-if&v-else的使用
v-if&v-else的使用
通过是用v-if
和v-else
我们可以根据条件进行渲染。注意,v-if
和v-else
在false
条件下,不会输出任何元素,并不是通过cssdisplay:none
来实现的。
代码:
<template>
<div>
<div v-if="show1">show1:{{show1}}</div>
<div v-if="show2">show2:{{show2}}</div>
<div v-else>show2:{{show2}}</div>
</div>
</template>
<script>
export default {
data(){
return {
show1:false,
show2:true,
}
}
}
</script>
<style>
</style>
页面输出show2:true
,可以看到只输出了show2。
注意事项
v-if
、v-else
如果用在自定义组件上面,如果条件发生变换,那么会导致该组件的生命周期发生变化。比如会触发mounted、destroyed等钩子,因为在false情况下会销毁组件,如果使用了缓存组件keeplived进行包裹,组件不会被销毁,但会触发activated、deactivated等钩子。
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。