JSFiddle - React, Tailwind, and code Playground

by Gil Alvaro

HTML

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

<div id="app">
  <p>{{ counter }}</p>
  <p>{{ getFullName }}</p> 
  <!-- <p>{{ getFullName }}</p> -->
  <button v-on:click="counter++">Increase Counter</button>
  <button v-on:click="changeName">Change Name</button>

</div>

JavaScript

new Vue({
	el: '#app',
  data: {
    counter: 1,
    firstName: 'Bo',
    lastName: 'Andersen'
  },
  methods: {
  changeName:  function() {
      this.firstName = "Mark";
      this.lastName = "Gonzales";
  	}
  },
  computed: {
  	getFullName: function() {
    	alert("Assembling full name...");
    	return this.firstName + ' ' + this.lastName;
    }
  }
});