05-vue-条件循环渲染样式

(3)条件渲染(面试)

<div id="app">

        <button @click = "change">v v</button>

        <!-- isshow会判断布尔。为假解绑移除节点，为真时重新构建显示。有更高的渲染消耗-->

        <!-- 不常常切换模块的业务 -->

        <div v-if="isshow">hello</div>

        <!-- 使用css的display:none 切换模块，它的属性值等会占用内存，更高的内存消耗 -->

        <!-- 频繁使用切换时使用 -->

        <div v-show="isshow">hello</div>

 </div>

    <script>

        new Vue({

            el:"#app",

            data:{

                isshow:"true"

            },

            methods: {

                change(){

                    this.isshow = !this.isshow

                },

            },

        })

    </script>

 

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具有较高的性能消耗,常常用在频繁切换的模块中

(4)循环渲染(面试)

1.基础循环

    <div id="app">

        <div v-for="el in arr">

            <!-- 节点克隆 -->

            <p> { { el}} + 1</p>