Renderização condicional com HTML

 Objetivo: Mostrar na tela um(a) usuário(a) logado(a) através de um click

<meta charset="UTF-8">

<script src="https://unpkg.com/vue"></script>

<div id="app">

    <p v-if= "logado">Usuário Logado: {{ nome }}</p><!--se estiver logado-->

    <p v-else="!logado">Nenhum usuário logado</p>

    <button @click="logado = !logado">

    {{ logado ? 'Sair' : 'Entrar' }}</button>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            nome: 'Maria',//Nome do usuário

            logado: false

        }

    })

</script>