JSFiddle - React, Tailwind, and code Playground

by octavioamu

HTML

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

<div id="exercise">
   <!-- 1) Fill the <p> below with your Name and Age - using Interpolation -->
    <p>VueJS is pretty cool - {{ YOUR_NAME }} ({{YOUR_AGE}})</p>
    <!-- 2) Output your age, multiplied by 3 -->
    <p>
      {{ YOUR_AGE * 3 }}
    </p>
    <!-- 3) Call a function to output a random float between 0 and 1 (Math.random()) -->
    
    <p> {{randomNum() }} </p>
    <!-- 4) Search any image on Google and output it here by binding the "src" attribute -->
    <div>
        <img v-bind:src="IMG" style="width:100px;height:100px">
    </div>
    <!-- 5) Pre-Populate this input with your name (set the "value" attribute) -->
    <div>
        <input type="text" v-model="YOUR_NAME">
    </div>
</div>

JavaScript

new Vue({
	el: '#exercise',
  data: {
  	YOUR_NAME: 'Octavio Amuchástegui',
    YOUR_AGE: '32',
    IMG: 'https://vuejs.org/images/logo.png',
  },
  methods: {
  	randomNum: function () {
    	return Math.random()
    }
  }
})