vue

Vue学习笔记（七）之条件渲染

Posted by weite122 on 2018-08-25

条件渲染

v-if和v-show

  • 效果

  • 代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue的条件渲染</title>
        <script src="http://vuejs.org/js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-if="show" data-test="v-if">{{message}}</div>
            <div v-show="show" data-test="v-show">{{message}}</div>
            <!-- v-if和 v-show 的区别当show为false的时候，v-if会直接删除DOM节点，而v-show会设置display：none，性能更好 -->
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    show: false,
                    message: "Hello World"
                }
            })
        </script>
    </body>
    </html>

    • v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

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

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

    • 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if和v-else

  • 效果
  • 代码： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue的条件渲染</title>
        <script src="http://vuejs.org/js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-if="show === 'a'">This is a</div>
            <div v-else-if="show ==='b'">This is b</div>
            <div v-else>This is others</div>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    show: "a"
                }
            })
        </script>
    </body>
    </html>

key值问题

  • 效果
  • 代码 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue的条件渲染</title>
        <script src="http://vuejs.org/js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-if="show">
                用户名： <input type="text" key="username">
            </div>
            <div v-else>
                邮箱名：<input type="text" ey="password">
            </div>
            <!-- Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。当有了key值以后，他就是页面上唯一的元素，Vue就不会继续复用该元素的内容 -->
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    show: false
                }
            })
        </script>
    </body>
    </html>

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

FEATURED TAGS
vue
FRIENDS