Vue的 v-if 与 v-show 指令

最新推荐文章于 2022-08-02 20:57:06 发布

原创最新推荐文章于 2022-08-02 20:57:06 发布 · 215 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

js 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了Vue.js中的条件渲染指令v-if、v-else、v-show的使用方法及其区别，并通过实例展示了如何根据条件显示或隐藏DOM元素。

相关说明全在代码注释里

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <!--
        v-if
        isShow为true则v-if内显示，为false则不显示
    -->
    <div id="app1">
        <div v-if="isShow">
            <p>hello!</p>
            {{msg}}
            <p>hello!</p>
        </div>
    </div>
    <script>
        const app1 = new Vue({
            el: '#app1',
            data: {
                msg: 'hello Vue.js!',
                isShow: true
            }
        })
    </script><hr>

    <!--
        v-if 与 v-else
        "济钢"显示则"虚哥"不显示，"虚哥"显示则"济钢"不显示，
    -->
    <div id="app2">
        <div v-if="isWin">
            <p>济钢</p>
        </div>
        <div v-else>
            <p>虚哥</p>
        </div>
    </div>
    <script>
        const app2 = new Vue({
            el: '#app2',
            data: {
                isWin: true
            }
        })
    </script>

    <!-- 
        v-if、v-if-else、v-else
    -->
    <div id="app3">
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=80">良好</p>
        <p v-else-if="score>=60">及格</p>
        <p v-else>不及格</p>
    </div>
    <script>
        const app3 = new Vue({
            el: '#app3',
            data: {
                score: 95
            }
        });
    </script><hr>

    <!-- 用户登录方式切换案例 -->
    <div id="app4">
        <span v-if="isUser">
            <label for="username">用户账号</label>
            <input type="password" id="username" placeholder="用户密码">
        </span>
        <span v-else>
            <label for="email">邮箱登录</label>
            <input type="email" id="email" placeholder="用户邮箱">
        </span>
        <button @click='changeUser'>切换类型</button>
    </div>
    <script>
        const app4 = new Vue({
            el: '#app4',
            data: {
                isUser: true
            },
            methods: {
                changeUser: function() {
                    this.isUser = !this.isUser;
                }
            }
        })
    </script><hr>

    <!--
        v-show 的使用以及与 v-if 的区别
        v-show 与 v-if 的使用效果相同，但打开控制台可见区别
        v-if 如果为 false，则页面无此元素
        v-show 如果为 false,则页面有此元素，但添加了内联样式 style="display: none;"
        因此实际开发中，切换频率很高的话一般使用 v-show ，如果一般只切换一次，则使用 v-if
    -->
    <div id="app5">
        <p v-if='isIf'>{{msg_if}}</p>
        <p v-show='isShow'>{{msg_show}}</p>
        <button @click="change">click</button>
    </div>
    <script>
        const app5 = new Vue({
            el: '#app5',
            data: {
                msg_if: '我是if',
                msg_show: '我是show',
                isIf: true,
                isShow: true
            },
            methods: {
                change(){
                    this.isIf = !this.isIf;
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

</html>