VueJS is pretty cool - {{ name }} ({{ age }})
{{ multiplyAge() }}
{{ randomFloat() }}
PROJECT CODE
<!--JAVASCRIPT SOURCE--> new Vue({ el: '#exercise', data: { name: 'Lexx Chaplin', age: 29, image: 'cat.png' }, methods: { multiplyAge: function(){ return this.age * 3; }, randomFloat: function(){ return Math.random(); } } });
<!--HTML SOURCE--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title>VueJS - Assignment 1</title> <link rel="stylesheet" href="" /> <script src="vue.js"></script> </head> <body> <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>{{ multiplyAge() }}</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="image" style="width:160px"> </div> <!-- 5) Pre-Populate this input with your name (set the "value" attribute) --> <div> <input type="text" v-bind:value="name"> </div> </div> </div> <script src="app1.js"></script> </body> </html>