vue之v-if v-else-if v-else 使用

最新推荐文章于 2024-08-21 11:45:01 发布

一路向北⁢

最新推荐文章于 2024-08-21 11:45:01 发布

阅读量6.5k

点赞数

分类专栏： Vue 文章标签： vue v-if v-else-if v-else

本文链接：https://blog.csdn.net/suprezheng/article/details/84933403

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue之v-if v-else-if v-else 使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue demo</title>
    <!--引入vue 依赖项-->
    <script type="text/javascript" src="js/vue.min.js"></script>
    
</head>
<body>
    <div id="myVue">

        <p v-if="true">true的时候显示</p>

        <p v-if="false">false的时候隐藏</p><br/>
        
        <!--  语法： v-if="表达式"   v-else-if="表达式"   v-else  -->
        <p v-if="age<18">未成年</p>
        <p v-else-if="age==18">刚好成年</p>
        <p v-else>成年人</p>
        
    </div>
    <script>
        /*定义Vue全局变量*/
        var app = new Vue({
            el:"#myVue",
            data:{
                "name":"helloWord",
                age:19
            }
        });
    </script>
</body>
</html>

结果：
在这里插入图片描述