v-show和v-if都是用来做条件渲染的
使用方法:
<div v-if="isShow">v-if显示/隐藏</div>
<div v-show="isShow">v-show显示/隐藏</div>
区别
-
v-show: 控制DOM元素显示,其实控制的是css样式,也就是 display:noe
-
v-if进行判断,在浏览器中预览,你会发现整个DOM元素都不见了
-
v-show 初始会渲染dom,v-if如果是false的状态下,初始不会渲染dom
-
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
完整代码
<template>
<!-- v-show 和 v-if -->
<div class="base07">
<home-back></home-back>
<div v-if="isShow">v-if显示/隐藏</div>
<div v-show="isShow">v-show显示/隐藏</div>
<button @click="isShow = !isShow">点击切换</button>
</div>
</template>
<script>
import Back from "@/components/common/back.vue"
export default {
data(){
return{
isShow:true
}
},
components:{
'home-back':Back
},
methods:{
}
}
</script>
<style scoped lang="stylus">
.base07
margin-top 30px
margin-left 50px
h2
margin-top 20px
</style>