03.vue page switching exercises

v-show

v-bind

v-on：click

 

<div class="container" id="app">
    <div class="text-large padding">
        <span v-on:click="onoff=true" v-bind:class="{'hand':true,'text-red':onoff}">登录</span>
        <span v-on:click="onoff=false" v-bind:class="{'hand':true,'text-red':!onoff}">注册</span>
    </div>

    <div v-show="onoff">
        <h1>登录页内容</h1>
    </div>

    <div v-show="!onoff">
        <h1>注册页内容</h1>
    </div>
</div>
</body>
</html>
<script>
    var vName = new Vue({
        el: '#app',
        data: {
            onoff:true
        }
    })
</script>