Vue的常用指令之选择指令（v-if）

最新推荐文章于 2023-11-18 21:45:35 发布

MZ小白

最新推荐文章于 2023-11-18 21:45:35 发布

阅读量854

点赞数

分类专栏： vue 文章标签： Vue的常用指令之选择指令（v-if） v-if 选择指令 vue常用指令

本文链接：https://blog.csdn.net/XLGKXSH/article/details/99289770

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue的常用指令之选择指令（v-if）

v-if指令：根据表达式执行的结果的真假，来选择是否要挂载到DOM上

第一种语法：<any v-if="表达式"></any>

第二种语法：

<any v-if="表达式"></any>
<any v-else-if="表达式"></any>
<any v-else="表达式"></any>

例子：

<body>
    <div id="container">
        <h1>{{msg}}</h1>
        <p v-if="!isMember">仅会员可见</p>
        <p v-if="answer=='a'">A</p>
        <p v-else-if="answer=='b'">B</p>
        <p v-else-if="answer=='c'">C</p>
        <p v-else>D</p>
    </div>

    <script>
        new Vue({
            el: "#container",
            data: {
                msg: '麻子',
                isMember: false,
                answer: 'a'
            },
            created: function () {
                console.log('Vue的实例已创建完成')
            }
        })
    </script>
</body>