vue中的条件渲染例子

vue中的条件渲染例子

<!DOCTYPE html>
<html>
<head>
    <title>vue中的条件渲染</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id='app'>
        <div v-if="show">{{message}}</div>
        <div v-show="show">{{message}}</div>
    
    </div>
        <div id='app-1'>
        <div v-if="show === 'a'">This is A</div>
        <div v-else-if="show === 'b'">This is B</div>
        <div v-else>This is others</div>
    </div>

    </div>
        <div id='app-2'>
        <div v-if="show">
            用户名: <input key="username"/>
        </div>
        
        <div v-else>
            邮箱名: <input key="email"/>
        </div>
    </div>
    
<script>
    var vm =  new Vue({
        el:'#app',
        data:{
            show: false,
            message:"Hello World"
        }

    })
    var vm1 =  new Vue({
        el:'#app-1',
        data:{
            show: "a",
        
        }
        
    
    })

    var vm2 =  new Vue({
        el:'#app-2',
        data:{
            show: false,
        
        }
        
    
    })

    
</script>
</body>
</html>