条件渲染(面试)

v-if /v-else 或者 v-show

 <div id="app">
    <div v-if="flag">hello</div>
    <div v-show="flag">world</div>
</div>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            flag:false
        }
    })

1.使用的变量为true就显示,false就隐藏

2.在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果

3.v-if的做法是删除节点,v-show做法是操作css的

display:none

visibility: hidden; 不脱离文档流的

display:none 脱离文档流

v-if 删除节点

v-show display:none

4.这个两个谁好?(面试)

根据它们底层的设计不一样有各自的使用场景

 v-if具有较高的 切换消耗,常常用在用户不常切换的模块

 v-show具有较高的性能消耗,常常用在频繁切换的模块中