JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

HTML

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

<div id="exercise">
  <p>
    VueJS is pretty cool - {{ myName }} ({{ myAge }})
  </p>
  
  <p>
    {{ myAge*3 }}
  </p>
  
  <p>
    {{ randomNumber() }}
  </p>
  <div>
    <img :src="myImage">
  </div>
  <div>
    <input type="text" :value="myName" />
  </div>
</div>

JavaScript

new Vue({
	el: '#exercise',
  data: {
  	myName: 'Pedro',
    myAge: 28,
    myImage: 'https://images.unsplash.com/photo-1557820178-20186da06935?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=927&q=80'
  },
  methods: {
  	randomNumber: function(){
    	return Math.random()
    }
  }
})