vue学习笔记---3.v-if与v-show的区别以及使用

最新推荐文章于 2024-05-25 21:36:40 发布

多多Ms

最新推荐文章于 2024-05-25 21:36:40 发布

阅读量208

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41667885/article/details/104935055

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述
共同点：
v-if和v-show都是通过判断绑定数据来展示的

不同点：
v-if只有在判断为true的时候才会对数据进行渲染，false的时候把包含的代码进行删除。
v-show是无论判断是什么都会先对数据进行渲染，只是false的时候对节点进行display:none;的操作。

从页面中可以看到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
    <div id="app">
        <input type="button" value="点我切换页面" @click="flag=!flag">
        <div v-if="flag">显示登录页面</div>
        <div v-else>显示注册页面</div>

        <div v-show="flag">
            使用v-show来显示
        </div>
    </div>
</body>

<script src="./lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:false
        },
        methods:{
           
        }
    })
</script>
</html>

在这里插入图片描述

用法：
v-if更适合于带有权限的操作，通过判断权限数据。
v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作。
v-if 有更高的切换消耗，而 v-show 有更高的初始渲染消耗。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好

多多Ms

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记---3.v-if与v-show的区别以及使用

首先是官方给出的说明共同点：v-if和v-show都是通过判断绑定数据来展示的不同点：v-if只有在判断为true的时候才会对数据进行渲染，false的时候把包含的代码进行删除。v-show是无论判断是什么都会先对数据进行渲染，只是false的时候对节点进行display:none;的操作。从页面中可以看到<!DOCTYPE html><html lang="en...
复制链接

扫一扫