JSFiddle - React, Tailwind, and code Playground

by Plínio Naves

HTML

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

<div id="app">
  <p>Nome 1: {{ nomeCompleto1 }}</p>
  <p>Nome 2: {{ nomeCompleto2 }}</p>
  <p>Está logado? {{ logado ? 'Sim' : 'Não' }}</p>
  <button @click="alterarNomes">Alterar nomes</button>
  <button @click="logado = !logado">Toggle logado</button>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    primeiroNome: 'Plínio',
    ultimoNome: 'Naves',
    nomeCompleto1: 'Plínio Naves',
    logado: true
  },
  computed: {
    nomeCompleto2: function() {
    	console.log('Computed!');
      return this.primeiroNome + ' ' + this.ultimoNome;
    }
  },
  watch: {
    primeiroNome: function(novoPrimeiroNome, antigoPrimeiroNome) {
    	console.log('Watcher PN!');
      this.nomeCompleto1 = novoPrimeiroNome + ' ' + this.ultimoNome;
    },
    ultimoNome: function(novoUltimoNome, antigoUltimoNome) {
    	console.log('Watcher UN!');
      this.nomeCompleto1 = this.primeiroNome + ' ' + novoUltimoNome;
    }
  },
  methods: {
    alterarNomes: function(event) {
      this.primeiroNome = 'Naves';
      this.ultimoNome = 'Plínio';
    }
  }
});