JSFiddle - React, Tailwind, and code Playground

by Nihar Raote

HTML

<div id="exercise">
  <p>VueJS is pretty cool - {{ name }} ({{ age }})</p>
  
  <p>{{ age * 3 }}</p>
  
  <p> Random number between 1 and 100 - {{ rndNum() }}</p>
  
  <div>
    <img :src="image" style="width: 400px; height: 350px">
  </div>
  
  <div>
    <input :value="name">
  </div>
</div>

Vue

new Vue({
	el: '#exercise',
  data: {
  	name: 'NAPOLEON',
    age: 19,
    image: 'https://preview.redd.it/rydtla9xitd21.jpg?width=640&crop=smart&auto=webp&s=4f864ab479ed14b2e0bc2386a5b147a2bcd82bde'
  },
  methods: {
  	rndNum() {
    	return Math.round(Math.random() * (100 - 1) + 1);
    }
  }
})