v-show的使用
v-show的使用
v-show
也是用来显示和隐藏元素的,它是用cssdisplay:none
来实现的。
代码:
<template>
<div>
<div v-show="show1">show1:{{show1}}</div>
<div v-show="show2">show2:{{show2}}</div>
</div>
</template>
<script>
export default {
data(){
return {
show1:false,
show2:true,
}
}
}
</script>
<style>
</style>
页面上显示了show2:true
,但是通过浏览器的元素审查,我们可以发现body里面的元素
<div>
<div style="display: none;">show1:false</div>
<div>show2:true</div>
</div>
这证明了,它是用cssdisplay:none
来实现的。
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。