vue学习记录--v-if与v-show

最新推荐文章于 2024-01-15 22:32:11 发布

ming_zi_hao_nan_a

最新推荐文章于 2024-01-15 22:32:11 发布

阅读量154

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/ming_zi_hao_nan_a/article/details/107930974

版权

vue学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小白初学习，如果不当，请多见谅！

v-if：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-条件渲染</title>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id = "app">
        <h1>用户名：{{username}}</h1>
        <h2 v-if = "isVip">用户类型: VIP</h2>
        <!-- v-if与v-else中间不能有其他任何元素-->
        <h3 v-else>用户类型：普通用户</h3>

        <h2>允许用户登录的时间：</h2>
        <h3 v-if="age >18">允许登录24小时</h3>
        <h3 v-else-if = "age >14">允许登录8小时</h3>
        <h3 v-else>允许登录4小时</h3>
    </div>

    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data:{
                username: "小秘",
                isVip: false,
               // isVip: true
                age: 24
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-v-show</title>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id = "app">
    <div v-show = "isShow" id = "show">
      hello vue!
    </div>
    <button @click = "show">切换显示内容</button>
</div>

<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data:{
           isShow: true
        },
        methods:{
          show : function () {
            app.isShow = !app.isShow
          }
        }
    })
</script>
</body>
</html>

页面内容不显示时：
在这里插入图片描述
页面内容显示时：

通过对比，可以发现：

v-if: 不显示时：第一次就不会渲染，如果内容已显示需要修改为不显示时，内容会从dom上去除 如果页面内容只是显示一次，建议使用v-if
v-show: 不显示时，就会改为display：none 但是会渲染在dom上 如果需要反复需要切换内容，建议使用v-show

ming_zi_hao_nan_a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习记录--v-if与v-show

小白初学习，如果不当，请多见谅！v-if：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>02-条件渲染</title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script></head&g
复制链接

扫一扫

专栏目录