Renderização condicional múltiplas com Administrador em HTML

 

<meta charset="UTF-8">

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

<div id="app">

    <template v-if="logado">

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

        <p>Perfil: Administrador</p>

    </template>

    

    <p v-else-if= "anonimo">Navegando 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>