JSFiddle - React, Tailwind, and code Playground

by Gonzalo Guevara

HTML

<script src="https://vuejs.org/js/vue.js"></script>

<div id="coso">
  <input type="text" v-model="url">
  <a :href="url" :title="url">{{url}}</a>
  <a href="#" class="reverse" @click="reverseText">Reverse</a>
  <div>
    <div class="item" v-for="co in cosas">
      {{ co.id }} - {{ co.name }}
    </div>
    <div>{{ diceHola('Amigo') }}</div>
  </div>
</div>

JavaScript

var vm = new Vue({
	el: '#coso',
  data: {
  	cosas: [
    	{id: 1, name: 'Coco'},
      {id: 2, name: 'Pera'}
    ],
    url: 'www.google.com'
  },
  methods: {
  	reverseText: function(){
    	this.url = this.url.split('').reverse().join('');
    },
    diceHola: function(msg){
    	console.dir(this);
    	return "Hola " + msg;
    }
  }
});