JSFiddle - React, Tailwind, and code Playground

by bpmania

HTML

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

<div id="app">
  <p>{{ counter }}</p>
  <p>{ fullName() }</p>
  <p>{{ fullName }}</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: {
  	fullName: function() {
    	alert("Assembling full name...");
    	return this.firstName + ' ' + this.lastName;
    }
  }
});