Vue模版语法之条件渲染

最新推荐文章于 2024-07-24 14:47:53 发布

云远12189

最新推荐文章于 2024-07-24 14:47:53 发布

阅读量416

点赞数 4

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41575632/article/details/136180689

版权

VUE 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1. v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的按钮是否可以点击案例</title>
    <script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
    <div id="root">
        <!--使用v-show进行显示隐藏控件,true-->
        <div v-show="isTrue">显示标签</div>
        <!--使用v-show进行显示隐藏控件,''-->
        <div v-show="isNull">标签被隐藏</div>
        <!--使用v-show进行显示隐藏控件,false-->
        <div v-show="isFalse">标签被隐藏</div>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp } = Vue
    createApp({
        data() {
            return {
                isTrue:true,
                isNull:'',
                isFalse:false,
            }
        },
    }).mount('#root')
</script>

在这里插入图片描述

2. v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的按钮是否可以点击案例</title>
    <script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
    <div id="root">
        <!--使用v-show进行显示隐藏控件,true-->
        <div v-if="isIf">隐藏标签</div>
        <div v-else-if="isElseIf">显示标签</div>
        <div v-else="isElse">隐藏标签</div>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp } = Vue
    createApp({
        data() {
            return {
                isIf:'',
                isElseIf:true,
                isElse:false,
            }
        },
    }).mount('#root')
</script>

在这里插入图片描述
3.注意点
1.当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。
2.v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。
3.因为 v-if 是一个指令,我们可以在一个元素上使用 v-if
4.一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。
5.v-show 不支持在元素上使用，也不能和 v-else 搭配使用。

云远12189

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Vue模版语法之条件渲染

2.v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。如果在运行时绑定条件很少改变，则 v-if 会更合适。4.一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。1.当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。5.v-show 不支持在元素上使用，也不能和 v-else 搭配使用。3.因为 v-if 是一个指令,我们可以在一个元素上使用 v-if。
复制链接

扫一扫

专栏目录