24 添加渲染if与show

最新推荐文章于 2022-12-08 21:37:22 发布

学习总不晚

最新推荐文章于 2022-12-08 21:37:22 发布

阅读量460

点赞数

分类专栏： Vue 文章标签： if和show的使用区别

本文链接：https://blog.csdn.net/u013472738/article/details/100430591

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

划重点

判断条件 if 的使用
判断添加 show 的使用

剁椒鱼头

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.6.10.js"></script>
    <script src="./lib/mui.js"></script>
    <script src="./lib/mui.min.js"></script>
    <link rel="stylesheet" href="./lib/mui.css">
    <link rel="stylesheet" href="./lib/mui.min.css">
</head>

<body>

    <div id="app">

        <h1 v-if="awesome">通过v-if判断是否需要显示文本内容</h1>

        <hr>
        <h3 v-if="awesome2">v-if判断是否需要显示文本内容</h3>
        <h3 v-else>如果if的判断是flase 话显示else的数据内容</h3>

        <hr>
        <br>
        <h2 v-show="awesome2">Hello!当 v-show 判断是 false的时候 不显示文本</h2>
        <h2 v-show="awesome">Hello! 当 v-show判断为 true的时候；显示文本内容 </h2>


        <hr>
        <hr>
        <div v-if="true">
            我是说明：由于 if 中的判断为：true 所以我可以显示出来
        </div>
        <div v-if="flag">
            我是说明：由于 if 中的判断为：true 所以我可以显示出来
        </div>
        <div v-if="error">
            我是说明：由于 if 中的判断为：false 所以我不能显示出来 ···
        </div>
        //v-if v-else :注意如果是 有多个if (else) 判断 那么这些元素要紧挨着
        <div v-if="error">
            我是说明：由于 if 中的判断为：true 所以我可以显示出来
        </div>
        <div v-else>
            我是说明：如果⬆️上面的一个if 判断不成立的话：我就显示出来了
        </div>

        //v-show 案例
        <div v-show="flagShow">
            我是说明：由于 show 中的判断为：false 所以我 不会显示 出来
        </div>
        <div v-show="errorShow">
            我是说明：由于 show 中的判断为：1(true) 所以我可以显示出来
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                awesome: true,
                awesome2: false,
                flag: true,
                error: null,
                flagShow: false,
                errorShow: 1
            }


        })


    </script>

</body>

</html>