05.条件渲染

最新推荐文章于 2024-07-30 17:09:59 发布

0o憨胖o0

最新推荐文章于 2024-07-30 17:09:59 发布

阅读量87

点赞数

分类专栏： Vue 文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/xia9527/article/details/108402903

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

四条件渲染

在日常开发中，我们关于应用界面的处理无外乎两个方面：数据和样式。

页面中我们经常可能需要控制数据的显示和隐藏，可以使用下面的指令：v-if、v-if和v-else、v-show

（1）v-if

每次都会重新删除或创建元素，并且可以更v-else配合使用，有较高的切换性能消耗。

如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

（2）v-show

每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式，有较高的初始渲染消耗。

如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show

（3）代码示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>05_条件渲染</title>
    </head>
    <body>
        <div id="app">
            <p v-if="ok">谈判成功</p>
            <p v-else>谈判失败</p>

            <hr>
            <p v-show="ok">离婚成功</p>
            <p v-show="!ok">离婚失败</p>

            <!-- 也可以绑定方法 -->
            <button @click="ok=!ok">切换</button>
        </div>

        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    ok: true,
                }
            })
        </script>
    </body>
</html>

0o憨胖o0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05.条件渲染

四条件渲染在日常开发中，我们关于应用界面的处理无外乎两个方面：数据和样式。页面中我们经常可能需要控制数据的显示和隐藏，可以使用下面的指令：v-if、v-if和v-else、v-show（1）v-if每次都会重新删除或创建元素，并且可以更v-else配合使用，有较高的切换性能消耗。如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if（2）v-show每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式，有较高的初始渲染消耗。如果元素涉及到频繁
复制链接

扫一扫