v-show 和 v-if

v-show和v-if都是用来做条件渲染的

使用方法：

<div v-if="isShow">v-if显示/隐藏</div>
<div v-show="isShow">v-show显示/隐藏</div>

区别

1. v-show： 控制DOM元素显示，其实控制的是css样式，也就是 display:noe
2. v-if进行判断，在浏览器中预览，你会发现整个DOM元素都不见了
3. v-show 初始会渲染dom，v-if如果是false的状态下，初始不会渲染dom
4. 一般来说， 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>