Vue---条件渲染(v-if/v-show)

v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回true值的时候被渲染。

v-if与v-else一块使用，v-show单独使用

<template>
<div class="hello">
    <p v-if="flag">你好</p>//flag为true显示
    <p v-else>再见</p>//当v-if内容不显示，也就是flag为false时，显示v-else的内容

    <p v-show="flag">byebye</p>//flag为true显示，flag为false不显示
</div>
</template>

<script>
    export default{
        name:'HelloWorld',
    data(){
        return{
            flag:true,
        }
    }
}
</script>

v-if与v-show的区别

① v-if是真正的条件渲染，在切换的过程中，条件块内的事件监听器和子组件适当地被销毁和重建。

可以理解为，如果flag为true就显示，如果flag为false会把这个元素直接给删除掉，在localhost：8080页面中的elements当中看不到此元素。

② v-if也是惰性的，如果在初始渲染时条件为假，则什么也不做---直到条件第一次变为真时，才会开始渲染条件块。

可以理解为，如果flag为true时就会进行渲染，显示出来内容，如果flag为false时，就不会进行渲染,不会显示内容，elements中也不会有这个元素，直到flag为true，才会进行渲染也就是显示内容。

③v-show就简单的多---不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。

也就相当于style="display:none;"页面也就不显示内容，但是是被渲染的，elements当中显示此元素。

相反如果style="display:block;"页面显示内容，也是被渲染的，elements当中也是显示此元素的。

④一般来说，v-if有更高的切换开销（因为从flag为false变为true，每一次切换，它相当于从删除又添加回来），而v-show有更高的初始渲染开销（无论一开始是true还是false都会进行渲染，只是通过了css进行了隐藏）。因此，如果需要非常频繁地切换，则使用v-show较好（因为v-if每一次切换都要进行删除添加操作），如果在运行时条件很少改变，则使用v-if较好（条件很少改变，如果用v-show每次都要渲染，渲染的速度会慢一点）。