1 esercicitazione vue

by Francesco Frustaci

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
    <p></p>
    <!-- 3) Call a function to output a random float between 0 and 1 (Math.random()) -->
     <p>{{random()}}</p>
    <!-- 4) Search any image on Google and output it here by binding the "src" attribute -->
    <div>
        <img   v-bind:href="image" style="width:100px;height:100px" >
    </div>
    <!-- 5) Pre-Populate this input with your name (set the "value" attribute) -->
    <div>
     <input type="text" v-bind:value="name">
    </div>
</div>

JavaScript

new Vue({
	el:'#exercise',
  data:{
  	name:'Francesco',
    age:25,
    image:'https://mrxwebpageblog.files.wordpress.com/2013/06/mrx_homer.jpg'
  },
  methods:{
  	agemultiply: function(){
     return this.age*3;
     
    },
    random : function(){
    	return  Math.random();

    }
  }
  });