VueJS course - assignment 1
by ptitgraig
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 - {{ fullname }} ({{age}})</p>
<!-- 2) Output your age, multiplied by 3 -->
<p>{{ageByThree}}</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 style="width:100px;height:100px" :src="link">
</div>
<!-- 5) Pre-Populate this input with your name (set the "value" attribute) -->
<div>
<input type="text" :value="fullname">
</div>
</div>
JavaScript
new Vue({
el: '#exercise',
data: {
fname: 'Greg',
lname: 'Pelletey',
age: 35,
link: 'http://ptitgraig.free.fr/pix/ptitgraiglogo.gif'
},
computed: {
fullname: function () {
return this.fname + '' + this.lname;
},
randomNum: function () {
return Math.random();
},
ageByThree: function () {
return
}
},
methods: {
}
})