exercise 1

by Andres Abadia

HTML

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

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

JavaScript

new Vue({
		el: '#exercise',
		data: {
			name: 'Andres',
			age: '31',
      imgSrc: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'
		},
		methods: {
			ageMultiply: function(){
				return this.age*3; 
			},
      randomFloat: function(){
      	return Math.random(0,1);
      }
		}
	});