天天看點

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

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

<!DOCTYPE html>
<html >
<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>
           

結果:

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