vue.js中的条件渲染（v-if/v-else/v-else-if/v-show）

83 阅读 0 评论 55 点赞

我是靠谱客的博主无限酒窝，这篇文章主要介绍vue.js中的条件渲染（v-if/v-else/v-else-if/v-show），现在分享给大家，希望可以做个参考。

1、在vue,.js中使用v-if进行条件判断，可以使用v-else指令给v-if添加一个else块，v-else指令必须紧跟在v-if或者v-else-if元素的后面，否则它将不会被识别。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
 <!-- 使用v-if进行条件渲染 -->
    <div id="#app">
        <p v-if="ok">加油，你是最棒的</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                ok:true
            }
        })
    </script>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
 <!-- 使用v-if和v-else -->
    <div id="app">
        <p v-if="ok">加油，你是最棒的</p>
        <p v-else>你要继续加油哦</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                ok:true
            }
        })
    </script>

2、因为v-if是一个指令，所以必须将它添加到一个元素上，如果想要切换多个元素，此时可以将一个<template>元素当做不可见的包裹元素，并在上面使用v-if进行渲染分组，最终的渲染结果将不包含<template>元素

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <!-- 在template上使用v-if进行渲染分组 -->
    <div id="app">
        <template v-if="ok">
            <h1>今天是新的一周</h1>
            <p>你要加油哦</p>
        </template>
        <template v-else>
            <h1>今天是新的一周</h1>
            <p>你要继续努力</p>
        </template>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                ok:false
            }
        })
    </script>

3、v-else-if是在vue.js2.1.0中新增的，用作v-if的else-if块，可以链式的多次使用

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <!-- 使用v-else-if -->
   <div id="app">
        <p v-if="type==='A'">A</p>
        <p v-else-if="type==='B'">B</p>
        <p v-else>notA/B</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                type:'C'
            }
        })
    </script>

4、另一个用于根据条件展示元素的选项是v-show指令，不同的是带有v-show的元素始终会被渲染并保留在DOM中，简单的说v-show只是简单地切换元素的css属性的display，但是v-show不支持template元素，也不支持v-else。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
 <!-- 另一个根据条件展示元素的指令v-show -->
    <div id="app">
        <p v-show="ok">我是v-show</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                ok:false
            }
        })
    </script>
    <!-- 展示结果中相当于给p元素添加了display:none的样式 -->

5、v-if&v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

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

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

【练习题】

1、随机生成一个数字，判断是否大于0.5，然后输出对应的信息

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
 <!--随机生成一个数字，判断是否大于0.5，然后输出对应的信息  -->
   <div id="app">
       <p v-if="num>0.5">随机产生的数字{{num}}大于0.5</p>
       <p v-else>随机产生的数字{{num}}小于或者等于0.5</p>
   </div>
   <script>
       new Vue({
        el:"#app",
        data:{
            num:Math.random()
        }
       })
   </script>