夜光带你走进Vue.js（十四）擅长的领域

GeniusTeam-夜光

于 2019-10-08 20:00:45 发布

阅读量116

点赞数

分类专栏： Genius-Vue.js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102211803

版权

Genius-Vue.js 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

夜光序言：

想必是应了那句，旧时光是个美人儿。很唐突的想起了这么一句话，或许这句话与此并没有太多干连，我却仍旧想提及。杜拉斯曾说，人一开始回忆，就已慢慢变老。

正文：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-if="Math.random() > 0.5">
        Sorry
    </div>
    <div v-else>
        Not sorry
    </div>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: '#app'
    })
</script>
</body>
</html>

v-if 与 v-show 的区别？

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。

v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。

因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            type: 'C'
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            type: 'D'
        }
    })
</script>
</body>
</html>

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进Vue.js（十四）擅长的领域

夜光序言：想必是应了那句，旧时光是个美人儿。很唐突的想起了这么一句话，或许这句话与此并没有太多干连，我却仍旧想提及。杜拉斯曾说，人一开始回忆，就已慢慢变老。正文：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt...
复制链接

扫一扫

专栏目录