Renderização condicional múltipla em HTML

 

<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-if= "anonimo">Navegando como Anônimo como Anônimo</p>

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

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

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

    <input type="checkbox" v-model="anonimo"><!--apontando para anônimo-->

</div>

<script>

    new Vue({

        el: '#app',

        data: {

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

            logado: false,

            anonimo: false,//caso deseje entrar como anônimo

        }

    })

</script>